HTML表格中的最大宽度答案

【问题标题】：max-width in an HTML tableHTML表格中的最大宽度
【发布时间】：2014-10-29 06:08:21
【问题描述】：

在 HTML 表格下方给出。

.panelgrid {
    table-layout: fixed;
    width: 100%;
    max-width: 500px;
    word-wrap: break-word;
}

<table class="panelgrid" rules="all" border="1">
    <tr>
        <td>Id</td>
        <td>1</td>
    </tr>

    <tr>
        <td>Value</td>
        <td>Loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text.</td>
    </tr>
</table>

当输入到表格单元格中的文本超过指定的max-width: 500px; 属性时，给定的样式会发生自动换行。

当文本的宽度小于max-width 属性时，不会发生表格应该根据文本的宽度自动适应没有发生的情况。

表格宽度保持在 500 像素，即使文本长度小于 500 像素。

当文字长度小于指定长度（本例为500px）时，如何实现表格自动缩小？

目前上面的CSS就像，

.panelgrid {
    table-layout: fixed;
    width: 500px;
    word-wrap: break-word;
}

【问题讨论】：

所以你不想在上面的例子中删除width:100%？这将导致它伸展......
包括或不包括width:100%。无论如何，它应该像所说的那样起作用。

标签： html css html-table

【解决方案1】：

您需要添加一个包含块元素（表格不是块元素）并在其上使用 max-width 来限制宽度。

<div style="max-width:500px;">
   <table>
      ...
   </table>
</div>

另请参阅此 SO 答案 min-width/max-width on no-block elements

【讨论】：

当表格内容超过指定的宽度时，会给出一个相对于表格的水平滚动条。
你能发布一个你所拥有的 JSFiddle 以便我可以使用它吗？
嗯，不幸的是，这可能是不可能的。我看到了困境。您可能必须修复左侧的列宽才能执行此操作。不幸的是，分词仅适用于 table-layout:fixed 但是将其固定的性质意味着所有列的宽度相等（请参阅w3schools.com/cssref/pr_tab_table-layout.asp）

【解决方案2】：

将您的 css 改为：http://jsfiddle.net/3b5aa3qq/

.panelgrid td{
    max-width: 400px;
    word-wrap: break-word;
}

删除“Long”字的长度以使其缩小。你也可以给它一个填充看起来更漂亮

【讨论】：

是的，你是对的！我只是离开那里，因为它已经在那里了。谢谢
word-wrap: break-word; 在 Internet Explorer 8 上不会发生。

【解决方案3】：

您可以将表格宽度设置为自动，并保持最大宽度为 500 像素。然后设置 word-break 为 break-all

width:auto;
max-width:500px;
word-break:break-all;

demo is here.

【讨论】：

word-wrap: break-word 好像没有任何效果。
为单元格设置最大宽度将解决自动换行问题：例如 .panelgrid td{max-width:400px;}
虽然我没有在 IE 10+ 上尝试过，但低于 10 的 IE 版本无法正常运行。
我在 ie 10 和 9 中对其进行了测试，它似乎按预期工作。
我更新了小提琴，找到了你的问题！使用分词代替自动换行 jsfiddle.net/pow48tt0/4

【解决方案4】：

不要使用 max-width 或 width 尝试使用 min-width

【讨论】：

使用min-width，表格水平增长以适应整个屏幕（在 Internet Explorer 8 上）。

【解决方案5】：

.panelgrid {
    table-layout: fixed;
    max-width: 500px;

    -ms-word-break: break-all;
    word-break: break-all;

    // Non standard for webkit
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

试试这个。在 jsfiddle 上为我工作。

【讨论】：

【解决方案6】：

另外两个答案是正确的。使用max-width 将使div 尽可能小，同时仍然足够大以容纳您放入其中的任何内容。使用width 将使div 始终是特定的像素大小，无论它包含什么内容。

【讨论】：