Question

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

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

但这似乎不起作用。我不希望它包装，也不想要显示超过280px的任何东西。

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

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>

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

Answer 3

除非将其内容包装在td之类的容器控件中，否则无法控制表格单元格（div）的宽度。以下jQuery函数将每个td的内容包装在div中。

function WrapTableCellsWithDiv(tableId)
{
    $('#' + tableId + ' tbody tr td').each(function ()
    {
        //get corresponding th of this td
        var tdIndex = $(this).index();
        var th = $('#' + tableId + ' thead tr th:nth-child(' + (tdIndex + 1) + ')');
        var thWidth = $(th).width();

        //wrap the contents of td inside a div
        var tdContents = $(this).html();
        var divTag = '<div style="width: ' + thWidth + '">' + tdContents + '</div>';
        $(this).html(divTag);
    });
}

此函数将每个td元素的内容包装在div标记内。 div标记的宽度将设置为相应th元素的宽度。

示例表结构：

<table id="SampleTable">
    <thead>
        <tr>
            <th style="width: 90px;">FirstName</th>
            <th style="width: 90px;">LastName</th>
            <th style="width: 60px;">Age</th>
            <th style="width: 70px;">Gender</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Smith</td>
            <td>25</td>
            <td>Male</td>
        </tr>
        <tr>
            <td>Ted</td>
            <td>Eddie</td>
            <td>22</td>
            <td>Male</td>
        </tr>
        <tr>
            <td>Angel</td>
            <td>Mike</td>
            <td>23</td>
            <td>Female</td>
        </tr>
    </tbody>
</table>

Answer 4

没有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;

    }

Answer 5

这可能很有用，因为上面的答案只是css：

td {
    word-wrap: break-word;
}

Answer 6

如果您的代码具有足够的相对逻辑，那么完全有可能。

简单地使用视口单元虽然对于某些数学可能有点复杂。我使用它来防止列表项膨胀某些表格列更长的文本。

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

显然max-width在colgroup元素上不工作，完全依赖子元素来控制父元素上的内容是非常蹩脚的。

Answer 7

在此处发布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>

Answer 8

只需将max-width属性设置为280px即可：

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

这将解决您的问题。

Answer 9

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

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

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

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

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

9 个答案: