Question

我有一个带有table-layout: fixed的html表和一个带有设置宽度的td。该列仍会展开以保存不包含空格的文本内容。有没有办法解决这个问题，除了将每个td的内容包装在一个div中？

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

Answer 5

您也可以使用“overflow：hidden”或“overflow-x：hidden”（仅适用于宽度）。这需要定义的宽度（和/或高度？），也可能是“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”......

Answer 6

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

Answer 7

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

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

这对我有用

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

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

8 个答案:

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

8 个答案:

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