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

将以下内容添加到包含长文本的td。

style="word-break:break-word"

Answer 2

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

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

您似乎还需要在桌面上设置th.from或类似的东西。表格喜欢调整大小以适应其内容，似乎您的整个表格正在调整大小以适应您明确告诉它不要换行的内容。我不能告诉你为什么它更喜欢扩展表而不是隐藏溢出但是那些表适合你。

table-layout属性将告诉它仅基于您给出的尺寸来渲染尺寸，而不是试图根据内容计算出有多大的东西。这意味着日期列上1％宽度的内容可能会截断该列（除非在最宽的屏幕上）。

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

CSS表 - 列忽略溢出

实例：Tinkerbin 。

2 个答案: