Question

在下面给出一个HTML表格。

＆＃13;

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

＆＃13;

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

＆＃13;

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

当文本的宽度小于max-width属性时，未发生的情况是，表格应根据未发生的文本宽度自动调整。

表格宽度保持在500px，即使以防文本长度小于500px。

当文本长度小于指定长度（在这种情况下为500px）时，如何实现表格自动收缩？

目前上面的CSS就像，

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

Answer 1

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

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

删除＆＃34; Long＆＃34;看它缩小的话。你也可以给它一个看起来更漂亮的衬垫

Answer 2

您需要添加一个包含块元素（表不是块元素）并使用max-width来约束宽度。

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

另见SO答案 min-width/max-width on no-block elements

Answer 3

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

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

demo is here

Answer 4

尝试使用min-width

而不是使用max-width或width

Answer 5

另外两个答案是正确的。使用max-width会使div尽可能小，同时仍然足够大以适应您放入其中的任何内容。使用width会使div始终为特定像素大小，无论其内容如何。

Answer 6

.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上为我工作。

HTML表格中的max-width

6 个答案: