如何在全宽表中以最大宽度包装表格单元格

Question

我想在左侧有一个带有标题的表格,标题应该尽可能地窄,并且值的空间应该占据页面宽度的其余部分.标题应该都在一行上,除非标题单元格的内容很长,此时标题应该包裹在多行上.

内容短,这有效:

<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>Quite Long Header</th>
        <td>value</td>
    </tr>
</table>

CSS:

table {
    width: 100%;
}

th {
    text-align: right;
    width: 10px;
    white-space: nowrap;
}

但是,当我尝试添加最大宽度而不是换行时,内容会溢出文本框:

table {
    width: 100%;
}

th {
    text-align: right;
    width: 10px;
    white-space: nowrap;
    max-width: 300px;
    word-break: break-all;
}

演示:https://jsfiddle.net/2avm4a6n/

似乎white-space: nowrap;样式会覆盖word-break: break-all;,因此max-width: 300px;导致文本溢出.我正在使用white-space: nowrap;和width: 10px;组合使标题列尽可能地缩小,而不包括在最小宽度以下使用空格的标题,但只包含width: 10px;和word-break: break-all;导致标题包装成单个字符以适应窄10px.

知道怎么用css做这个吗？

Answer 1

取出table width,从th取出width的white-space,和word-break.加入th word-wrap: word-break

我还建议您设置min-width: 150px或任何您想要的值.还添加这个td { width: 100%;}.

这是jsFiddle

th {
    text-align: right;
    max-width: 300px;
    min-width: 150px;
    word-wrap: break-word;
}
td {
    width: 100%;
}

<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>Quite Long Header</th>
        <td>value</td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>Quite Long Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader</th>
        <td>value</td>
    </tr>
</table>

Answer 2

如果您正在寻找,请告诉我:

删除white-space:nowrap和word-break:break-all添加word-wrap:break-word

请参阅下面的代码段:

table {
    width: 100%;
}

th {
    text-align: right;
    width: 10px;
    max-width: 300px;
    word-wrap:break-word    
}

<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>Quite Long Header</th>
        <td>value</td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>Quite Long Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader</th>
        <td>value</td>
    </tr>
</table>

更新: OP评论 -may 18th

谢谢,这是接近的,但它不应该包裹短标题:它应该只在标题列达到最大宽度时开始包装

添加min-width到th适合你的最好的.(注意th哪些会破坏单词不接收min-width)正如@ Pangloss在另一个答案的评论中指出的那样.

请参阅下面的代码段:

table {
    width: 100%;
}

th {
    text-align: right;
    width: 10px;
    min-width:133px; /* change the value for whatever fits you better */
    max-width: 300px;
    word-wrap:break-word    
}

<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>Quite Long Header</th>
        <td>value</td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>Quite Long Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader</th>
        <td>value</td>
    </tr>
</table>

Answer 3

如果您已经知道数据<th>已经存在,那么您可以将长文本包装到<span>标签中,然后稍微调整一下CSS.

UPDATED JSFIDDLE

table {
    width: 100%;
}
th {
    text-align: right;
    white-space: nowrap;
}
th span {
    white-space: normal;
    word-break: break-all;
    display: block;
}
td {
    width: 100%;
}

<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>Quite Long Header</th>
        <td>value</td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>Quite Long Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th><span>MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader</span></th>
        <td>value</td>
    </tr>
</table>