Question

我有大约html表格,其中文本数据太大,无法适当使用。因此,它纵向扩大该电池,以适应这一需要。因此,现在,超额增长是数据数量较少的浏览数的两倍。这是不可接受的。我怎么能够迫使桌上在<条码>1em上保持同样的高位?

这里是重复这一问题的一些标志。表格只能是一行的顶峰,其溢出案文是隐蔽的。

<!DOCTYPE html>

<html>
  <head>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
      table { width:250px; }
      table tr { height:1em; overflow:hidden; }
    </style>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>This is a test.</td>
        <td>Do you see what I mean?</td>
        <td>I hate this overflow.</td>
      </tr>
    </table>
  </body>
</html>

Answer 1

需要具体说明两个特性,<代码>table-layout:fixed on table and white-space:nowrap; on the cell。您还需要将<代码>overflow:hidden;移至牢房。

table { width:250px;table-layout:fixed; }
table tr { height:1em;  }
td { overflow:hidden;white-space:nowrap;  }

<http://jsbin.com/ixetu”rel=“noretinger”> 页: 1 测试:3.5.3和7

Answer 2

一般而言,如果你使用<代码>white-space: nowrap; 这很可能是因为你知道哪一栏将包含包装内容(或把电池延伸)。在这些栏目中,我一般在<代码>span中填入该单元的内容,并附有具体<代码>>的属性,并适用具体的<代码>width。

例:

<><>:>

<td><span class="description">My really long description</span></td>

<>CSS:

span.description {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    width: 150px;
}

Answer 3

在大多数现代浏览器中,你现在可以说明:

<table>
 <colgroup>
  <col width="100px" />
  <col width="200px" />
  <col width="145px" />
 </colgroup>
 <thead>
  <tr>
   <th>My 100px header</th>
   <th>My 200px header</th>
   <th>My 145px header</th>
  </tr>
 </thead>
 <tbody>
  <td>100px is all you get - anything more hides due to overflow.</td>
  <td>200px is all you get - anything more hides due to overflow.</td>
  <td>100px is all you get - anything more hides due to overflow.</td>
 </tbody>
</table>

之后,如果你采用上述员额的风格,情况如下:

table {
    table-layout: fixed; /* This enforces the "col" widths. */
}
table th, table td {
    overflow: hidden;
    white-space: nowrap;
}

其结果使你在整个桌旁充耳不闻。最新工程,Sato,Embra和IE。我在9年前就在IEC进行过检测,但我的猜测是,它的工作将持续到7年,你甚至可能得到足够的 l,看看5.5或6份支持。

Answer 4

Only downside (it seems), is that the table cell widths are identical. Any way to get around this? – Josh Stodola Oct 12 at 15:53

每张桌子的毛 the和毛 the

类似情况

table {border-collapse:collapse; table-layout:fixed; width:900px;}
th {background: yellow; }
td {overflow:hidden;white-space:nowrap; }
.cells1{width:300px;}
.cells2{width:500px;}
.cells3{width:200px;}

它像一个药店:o)

Answer 5

在此,我尝试过的东西。基本上,我把“弹性”内容(含有太长的线段)放在一线高的散射集装箱内,并隐藏着外溢。然后,我要把案文总结为无形内容。不过,你打破了字眼,而不仅仅是顺利的截断。

table {
    width: 100%;
}

.hideend {
    white-space: normal;
    overflow: hidden;
    max-height: 1.2em;
    min-width: 50px;
}
.showall {
    white-space:nowrap;
}

<table>
    <tr>
        <td><div class="showall">Show all</div></td>
        <td>
            <div class="hideend">Be a bit flexible about hiding stuff in a long sentence</div>
        </td>
        <td>
            <div class="showall">Show all this too</div>
        </td>
    </tr>
</table>

Answer 6

如果接受javascript作为答案,我就为解决这一问题做了一个 j花板(关于这个问题的更多信息,见 )。 CSS: Truncate table cell,但尽可能适合。

2. 采用原始法

$( selector ).tableoverflow();

Plugin:https://github.com/marcogrcr/jquery-tableoverflow”rel=“nofollow noreferer”>https://github.com/marcogrcr/jquery-tableoverflow

<>Restrong>Full example:http://jsfiddle.net/Cw7TD/3/内含/result/

Answer 7

表格载于div,类别=“container”

div.container {
    width: 100%;
    overflow-x: auto;
}

之后

#table_id tr td {
   white-space:nowrap;
}

结果

友情链接