强制表格列宽始终固定，无论内容如何

我有一个html表table-layout: fixed和一个具有设定宽度的td。该列仍会扩展以容纳不包含空格的文本内容。除了将每个td的内容包装在div中之外，是否有其他方法可以解决此问题？

示例：http：//jsfiddle.net/6p9K3/29/

<table>
    <tbody>
        <tr>
            <td style="width: 50px;">Test</td>
            <td>Testing 1123455</td>
        </tr><tr>
            <td style="width: 50px;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
            <td>B</td>
        </tr>
    </tbody>
</table>

table
{
    table-layout: fixed;
}

td
{
    border: 1px solid green;
    overflow: hidden;
}

在示例中，您可以看到尽管具有AAAAAAAAAAAA ...的列已显式设置为50px宽，但仍在扩展。

指定表格的宽度：

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

见jsFiddle

尝试查看以下CSS：

word-wrap:break-word;

Web浏览器默认情况下不应分解“单词”，因此您遇到的是浏览器的正常行为。但是，您可以使用自动换行CSS指令覆盖此内容。

您需要在整个表格上设置一个宽度，然后在各列上设置一个宽度。“宽度：100％；” 根据您的要求也应该可以。

使用自动换行可能不是您想要的，但是在不变形布局的情况下显示所有数据很有用。

在CSS之前，使表格坚如磐石。计算表的宽度，然后使用“控制”行，其中每个td都有一个明确的宽度，所有这些宽度加起来等于table标记中的宽度。

必须做数百个html电子邮件才能在任何地方工作，首先要使用正确的HTML，然后对w / css进行样式设置将解决所有IE，webkit和mozillas中的许多问题。

所以：

<table width="300" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50"></td>
    <td width="100"></td>
    <td width="150"></td>
  </tr>
  <tr>
    <td>your stuff</td>
    <td>your stuff</td>
    <td>your stuff</td>
  </tr>
</table>

将保持300px宽的表格。观看比宽度大一些的图像

您可以添加div到td，然后风格。它应该按预期工作。

<td><div>AAAAAAAAAAAAAAAAAAA</div></td>

然后的CSS。

td div { width: 50px; overflow: hidden; }

您也可以使用“溢出：隐藏”或“溢出-x：隐藏”（仅针对宽度）。这需要定义的宽度（和/或高度？），可能还需要“ display：block”。

“溢出：隐藏”隐藏了整个内容，该内容不适合定义的框。

例：

http://jsfiddle.net/NAJvp/

HTML：

<table border="1">
    <tr>
        <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
        <td>bbb</td>
        <td>cccc</td>
    </tr>
</table>

CSS：

td div { width: 100px; overflow-y: hidden; }

编辑：对我感到羞耻，我已经看到，您已经使用“溢出”。我猜这是行不通的，因为您没有将“ display：block”设置为元素...

我会尝试将其设置为max-width：50px;

您还可以使用百分比，和/或在列标题中指定：

<table width="300">  
  <tr>
    <th width="20%">Column 1</th>
    <th width="20%">Column 2</th>
    <th width="20%">Column 3</th>
    <th width="20%">Column 4</th>
    <th width="20%">Column 5</th>
  </tr>
  <tr>
    <!--- row data -->
  </tr>
</table>

带有百分比的好处是代码维护成本较低：您可以更改表的宽度而不必重新指定列的宽度。

警告：据我了解，HTML 5不支持以像素为单位指定的表格宽度；您需要改用CSS。

这对我有用

td::after { 
content: ''; 
display: block; 
width: 30px;
}