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

【问题标题】：How to wrap table cell at a maximum width in full width table如何在全宽表格中以最大宽度包装表格单元格
【发布时间】：2015-07-29 23:11:38
【问题描述】：

我想要一个表格，其左侧有标题，标题应尽可能窄，并且值的空间应占据页面宽度的其余部分。标题应该都在一行，除非标题单元格的内容很长，此时标题应该换成多行。

对于简短的内容，这是可行的：

<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; 导致标题换行成单个字符以适应狭窄的 10 像素。

知道如何用 css 做到这一点吗？

【问题讨论】：

它还必须保持display: table 吗？或者它可以与它的外观有所不同（当然还有边框等）
@chrona：我有很多行，我希望右侧列中的所有元素仍然水平左对齐，而不管左侧列中的内容如何，如果不使用表格也可以的话。

标签： html css

【解决方案1】：

从th 中删除table width，删除width、white-space 和word-break。添加到thword-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>

【讨论】：

仅供参考 - 它不会使 TH 在第三张表中接收最小宽度。
请注意，如果没有任何标题词超出最大宽度（也就是说，如果一个长标题是“一个非常非常长的标题”而不是“areallyreallyreallylongheader”）你可以省略@ 987654334@，只需使用 max-width、min-width 和 td width

【解决方案2】：

如果这是您要找的，请告诉我：

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

参见下面的 sn-p：

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。（请注意，@Pangloss 在对另一个答案的评论中指出，th 会破坏单词不会收到 min-width）。

参见下面的 sn-p：

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>

【讨论】：

谢谢，这很接近，但它不应该包装短标题：它应该只在标题列达到最大宽度时才开始包装。

【解决方案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>

【讨论】：

【解决方案4】：

@Douglas ：我认为你做的一切都是正确的。但正如在你给定的例子和问题中你说你想要窄标题所以你给th 10px 宽度。但是如果您想在示例中实现 10px 宽度，则仅删除 white-space: nowrap;

然后它看起来像 示例 1。

示例 1： https://jsfiddle.net/2avm4a6n/20/

示例 2：作为所有用户给出的答案，您也可以这样做

示例 3： 如果您想使用 white-space: nowrap; 则还有另一种选择，然后再应用一件事，即 text-overflow：省略;溢出：隐藏； https://jsfiddle.net/2avm4a6n/21/

 text-overflow: ellipsis;
 overflow: hidden;

编辑

并使用 text-align: left;如果您希望文本从左侧开始

【讨论】：

您的“示例 2”似乎不是很有用 - 也许您应该删除它。对于其他问题，也许您可以在问题中使用代码 sn-p，而不是链接到 jsfiddle。

【解决方案5】：

一些CSS3 grid layout怎么样：

.grid {
    display: grid;    
    grid-template-columns: minmax(1fr, auto) auto;
}

.label {
    grid-column: 1;
    word-break: break-all;
    max-width: 300px;
}

.value {
    grid-column: 2;
}

<div class="grid">
    <div class="label">Short Header</div>
    <div class="value">value</div>
</div>
<br/>
<div class="grid">
    <div class="label">Short Header</div>
    <div class="value">value</div>
    <div class="label">Quite Long Header</div>
    <div class="value">value</div>
    <div class="label">Short Header</div>
    <div class="value">value</div>
</div>
<br/>
<div class="grid">
    <div class="label">Short Header</div>
    <div class="value">value</div>
    <div class="label">Quite Long Header</div>
    <div class="value">value</div>
    <div class="label">MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader</div>
    <div class="value">value</div>
    <div class="label">Quite Long Header</div>
    <div class="value">value</div>
</div>

要查看实际效果，您必须使用 Chrome，转至 chrome://flags 并启用启用实验性 Web 平台功能选项。

显然，目前这并没有多大用处，但肯定值得期待！

【讨论】：

【解决方案6】：

你可以通过给“th”一个宽度来实现这一点，并使 text-align:left

html

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

css

table {
    width: 100%;
}

th {
    text-align: left;
    width: 500px;
}

工作小提琴： https://jsfiddle.net/2avm4a6n/16/

【讨论】：

不幸的是，这使得所有表格中第一列的宽度至少为 500px 宽，在标题较短的前两个表格中，第一列应该比最后一个表格更窄。