1

我有一个表格，里面有几列，第二列有很多文本，将其他列推到右边太远。我希望我的桌子保持原样，如果一列中的文本太多而无法切断。我还应该提到我试图避免使用table-layout:fixedand 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%;
}

活生生的例子：廷克宾。

4

2 回答 2

0

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

style="word-break:break-word"
于 2012-07-23T16:29:01.570 回答
0

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

您需要overflow: hidden在 all 上设置td，使用第二个项目类型伪选择器，或者最简单的方法是将 from 类放在 thetd和 styletd.from上th.from。

看来您还需要table-layout: fixed;在桌子上或类似的东西上设置。表格喜欢调整大小以适合其内容，并且您的整个表格似乎正在调整大小以适合您明确告诉它不要换行的内容。我不能告诉你为什么它更喜欢扩展表格而不是隐藏溢出，但这是给你的表格。

table-layout 属性将告诉它仅根据您给它的尺寸呈现大小，而不是尝试根据内容计算出要制作多大的东西。这意味着像日期列上的 1% 宽度之类的东西可能会截断该列（除了在非常宽的屏幕上）。

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

于 2012-07-23T16:36:22.930 回答