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

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... 的列虽然被明确设置为 50 像素宽，但仍会扩展。

Answer 1

指定表格的宽度：

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

见jsFiddle

Answer 2

尝试查看以下 CSS：

word-wrap:break-word;

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

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

使用自动换行可能不是您想要的，但它对于显示所有数据而不会使布局变形很有用。

Answer 3

在css之前使桌子坚如磐石。计算表格的宽度，然后使用“控制”行，其中每个 td 都有一个明确的宽度，所有这些加起来就是表格标签中的宽度。

必须做数百个 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>

将保持一张 300 像素宽的表格。观看极端大于宽度的图像

Answer 4

您可以在 中添加一个div，td然后对其进行样式设置。它应该按您的预期工作。

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

然后是css。

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

Answer 5

您还可以使用“溢出：隐藏”或“溢出-x：隐藏”（仅用于宽度）。这需要定义的宽度（和/或高度？），也可能需要一个“显示：块”。

“溢出：隐藏”隐藏了不适合定义框的全部内容。

例子：

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

编辑：我感到羞耻，我已经看到，你已经使用了“溢出”。我想它不起作用，因为您没有将“显示：块”设置为您的元素......

Answer 6

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

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

Answer 7

我会尝试将其设置为：

max-width: 50px;

Answer 8

这对我有用

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