HTML CSS 如何阻止表格单元格展开答案

【问题标题】：HTML CSS How to stop a table cell from expandingHTML CSS 如何阻止表格单元格展开
【发布时间】：2010-11-17 04:39:23
【问题描述】：

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

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

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

【问题讨论】：

标签： html css

【解决方案1】：

尝试以下 css 来停止扩展表格及其单元格。

table {
    table-layout: fixed;
    width: 100%;
}

th, td {
    word-wrap: break-word;
}

table-layout: fixed 将使您的桌子固定。但列/单元格仍然会过低或扩展。要解决该问题，请使用 word-wrap: break-word

【讨论】：

【解决方案2】：

只需将 max-width 属性设置为 280px，如下所示：

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

这会解决你的问题。

【讨论】：

【解决方案3】：

这可能很有用。就像另一个答案一样，它只是 CSS。

td {
    word-wrap: break-word;
}

【讨论】：

【解决方案4】：

在此处发布 Chris Dutrow 的评论作为答案：

style="table-layout:fixed;"

表格本身的样式对我有用。谢谢克里斯！

完整示例：

<table width="55" height="55" border="0" cellspacing="0" cellpadding="0" style="border-radius:50%; border:0px solid #000000;table-layout:fixed" align="center" bgcolor="#152b47">
  <tbody>
    <td style="color:#ffffff;font-family:TW-Averta-Regular,Averta,Helvetica,Arial;font-size:11px;overflow:hidden;width:55px;text-align:center;valign:top;whitespace:nowrap;">

     Your table content here

    </td>
  </tbody>
</table>

【讨论】：

【解决方案5】：

如果您的代码有足够的相关逻辑可以使用，这是完全可能的。

只需使用视口单位，尽管对于某些数学可能有点复杂。我用它来防止列表项用更长的文本来膨胀某些表格列。

ol {max-width: 10vw; padding: 0; overflow: hidden;}

显然，colgroup 上的 max-width 元素确实不工作，完全依赖子元素来控制父元素上的某些东西是相当蹩脚的。

【讨论】：

【解决方案6】：

没有 JavaScript，只有 CSS。工作正常！

   .no-break-out {
      /* These are technically the same, but use both */
      overflow-wrap: break-word;
      word-wrap: break-word;

      -ms-word-break: break-all;
      /* This is the dangerous one in WebKit, as it breaks things wherever */
      word-break: break-all;
      /* Instead use this non-standard one: */
      word-break: break-word;

      /* Adds a hyphen where the word breaks, if supported (No Blink) */
      -ms-hyphens: auto;
      -moz-hyphens: auto;
      -webkit-hyphens: auto;
      hyphens: auto;

    }

【讨论】：

请提供您的代码的一些解释，以帮助网站的其他用户。

【解决方案7】：

<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>

当然，您可以将其放在单独的链接样式表中，而不是内联...不是吗；）

【讨论】：

"table-layout:fixed" 在表格本身的样式中是唯一对我有用的东西。
我同意“table-layout:fixed”也解决了我的问题。 ":auto" 似乎可以防止溢出...溢出。

【解决方案8】：

您的 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;
}

【讨论】：