无论内容如何,​​强制表列宽始终固定

Question

我有一个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宽,但仍会展开.

Answer 1

指定表格的宽度:

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

见jsFiddle

Answer 2

尝试查看以下CSS:

word-wrap:break-word;

Web浏览器默认情况下不应该分解"单词",因此您遇到的是浏览器的正常行为.但是,您可以使用自动换行CSS指令覆盖它.

您需要在整个表格上设置宽度,然后在列上设置宽度."宽度:100%;" 也应该没问题,具体取决于您的要求.

使用自动换行可能不是您想要的,但是在不改变布局的情况下显示所有数据非常有用.

Answer 3

在css之前让桌子坚如磐石.计算表格的宽度,然后使用"控制"行,每个td都有一个明确的宽度,所有这些都加在表格标签的宽度上.

必须要使用正确的HTML首先使用正确的HTML来处理数百个HTML电子邮件,然后使用w/css样式将解决所有IE,webkit和mozilla中的许多问题.

所以:

<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宽的表格.观看极端宽度大于宽度的图像

Answer 4

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

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

然后是CSS.

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