html - CSS 表 - 忽略溢出的列

Question

我有一个表格，里面有几列，我的第二列有很多文本，将其他列推得太靠右了。我希望我的表格保持原样，如果一列中的文本太多而无法将其截断。我可能还应该提到，我试图避免使用 table-layout:fixed 和 position:absolute。这是我的代码:

HTML:

<table id="messages_list" class="listing rows clickable">
  <tbody>
    <tr>
      <th class="select"><input id="all" type="checkbox"></th>
      <th class="from">To</th>
      <th class="subject">Subject</th>
      <th class="date">Date</th>
    </tr>
    <tr class="item even " data-thread-id="16">
      <td class="first"><input class="checkbox" type="checkbox" name="id:16"></td>
      <td>LastName, FirstName, LastName2, FirstName2, LastName3, FirstName3, LastName4, FirstName4</td>
      <td>Hello</td>
      <td class="last">07/16/2012 12:26</td>
    </tr>
  </tbody>
</table>

CSS:

table.listing {
  border: 0;
  border-spacing: 0;
  width: 100%;
  margin-bottom: 1em;
  overflow: hidden;
  white-space: nowrap;
}
table.listing th {
  padding: 4px 8px;
  font-size: 12px;
  background: #002A80;
  text-decoration: none !important;
  color: white !important;
  font-weight: bold;
  text-align: left;
}
th.select { 
  width: 10px; 
}
th.from { /* This is the column giving me problems */
  width: 20%;
  overflow: hidden;
}
th.date {
  width: 1%;
}

实例:Tinkerbin .

Answer 1

您实际上并没有将溢出应用到正确的单元格。 th.from 只是标题单元格，虽然这足以设置宽度，但 overflow 属性不会进入该列中的其他单元格。

您需要在所有 td 上设置 overflow: hidden，使用第二个元素类型伪选择器，或者最简单的方法是将 from 类放在 上td 以及样式 td.from 和 th.from 相同。

看来您还需要在您的 table 或类似的东西上设置 table-layout: fixed;。表格喜欢调整大小以适合其内容，并且您的整个表格似乎都在调整大小以适合您明确告诉它不要换行的内容。我无法告诉您为什么它更喜欢扩展表格而不是 overflow hidden 部分，但这是适合您的表格。

table-layout 属性会告诉它根据你给它的尺寸来渲染尺寸，而不是试图根据内容来计算尺寸。这意味着像日期列上的 1% 宽度之类的东西可能会截断该列(除了在非常非常宽的屏幕上)。

我不确定是否有一种简单的方法可以在进行溢出并保持良好的大小调整时关闭换行。我认为固定布局表格可能是您唯一的选择。