HTML CSS 如何阻止表格单元格扩展

Question

我有一个表，它是用来自返回数据集的内容构建的。我想要做的是阻止“描述”单元格扩展超过 280 像素宽，无论内容长度（它的 s 字符串）是多少。我努力了：

 <td align="left" valign="top" style="overflow:hidden;" nowrap="nowrap" width="280px" >

但这似乎不起作用。我不希望它换行，也不希望显示任何超过 280 像素的内容。

原文由 flavour404 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您的 HTML 语法对于表格单元格似乎不正确。在你尝试下面的其他想法之前，确认这是否有效……你也可以尝试将它添加到你的表格本身：table-layout:fixed..。

 <td style="overflow: hidden; width: 280px; text-align: left; valign: top; whitespace: nowrap;">
   [content]
</td>

新的 HTML

 <td>
   <div class="MyClass"">
       [content]
   </div>
</td>

CSS类：

 .MyClass{
   height: 280px;
   width: 456px;
   overflow: hidden;
   white-space: nowrap;
}

原文由 RSolberg 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

<table border="1" width="183" style='table-layout:fixed'>
  <col width="67">
  <col width="75">
  <col width="41">
  <tr>
    <td>First Column</td>
    <td>Second Column</td>
    <td>Third Column</td>
  </tr>
  <tr>
    <td>Row 1</td>
    <td>Text</td>
    <td align="right">1</td>
  </tr>
  <tr>
    <td>Row 2</td>
    <td>Abcdefg</td>
    <td align="right">123</td>
  </tr>
  <tr>
    <td>Row 3</td>
    <td>Abcdefghijklmnop</td>
    <td align="right">123456</td>
  </tr>
</table>

我知道这是老派，但试一试，它有效。

可能还想添加这个：

 <style>
  td {overflow:hidden;}
</style>

当然，你会把它放在一个单独的链接样式表中，而不是内联……不是吗 ;)

原文由 JP Silvashy 发布，翻译遵循 CC BY-SA 3.0 许可协议