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

I'd like to have a table with headers down the left hand side, the headers should be as narrow as possible, and the space for the values should take up the rest of the width of the page. The headers should all be on a single line, unless the content of the header cell is very long, at which point the header should wrap onto multiple lines.

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

With short content, this works:

内容短，这有效：

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

CSS:

CSS：

table {
    width: 100%;
}

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

However, when I try to add a maximum width, instead of wrapping, the content spills out of the text box:

但是，当我尝试添加最大宽度而不是包装时，内容溢出文本框：

table {
    width: 100%;
}

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

Demo: https://jsfiddle.net/2avm4a6n/

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

It seems that the white-space: nowrap; style overrides the word-break: break-all;, so the max-width: 300px; causes the text to spill out. I'm using the white-space: nowrap; and width: 10px; combination to make the header column as narrow as possible, without wrapping headers with spaces in below the minimum width, but having just the width: 10px; and the word-break: break-all; causes the headers to wrap into single characters to fit in the narrow 10px.

似乎是白色空间：nowrap; style覆盖了word-break：break-all;，所以max-width：300px;导致文本溢出。我正在使用白色空间：nowrap;和宽度：10px;组合以使标题列尽可能窄，而不包括在最小宽度以下使用空格的标题，但只有宽度：10px;和断言：打破所有;导致标题包装成单个字符以适应窄10px。

Any idea how to do this with css?

知道怎么用css做这个吗？

6 个解决方案

#1

Remove the table width, from th remove the width, the white-space, and the word-break. Add to the th word-wrap: word-break

从删除宽度，空格和分词中删除表格宽度。添加到word-wrap：word-break

I also suggest you to set min-width: 150px or any value you want. Also add this td { width: 100%;}.

我还建议你设置最小宽度：150px或你想要的任何值。同时添加此td {width：100％;}。

Here is the jsFiddle

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

#2

Let me know if this is what you are looking for:

如果您正在寻找，请告诉我：

remove white-space:nowrap and word-break:break-all and add word-wrap:break-word

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

see snippet below:

请参阅下面的代码段：

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>

UPDATE: OP Comment - may 18th

更新：OP评论 - 可能是18日

Thanks, this is close, but it shouldn't wrap the short headers: it should only start wrapping once the header column reaches the max-width

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

Add a min-width to th that fits you the best. (Note that th which will break words don't receive the min-width) as pointed out by @Pangloss in a comment to another answer.

添加适合您的最小宽度。 （请注意，正如@Pangloss在对另一个答案的评论中指出的那样，会破坏单词不会收到最小宽度）。

see snippet below:

请参阅下面的代码段：

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

How about some CSS3 grid layout:

一些CSS3网格布局怎么样：

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

To see this in action, you'll have to use Chrome, go to chrome://flags and enable the Enable experimental Web Platform features option.

要查看此操作，您必须使用Chrome，转到chrome：//标记并启用“启用实验性Web平台功能”选项。

Obviously this isn't much use at the moment but certainly something to look forward to!

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

#4

If you know what the data is in the <th> already, you could then wrap the long length text into a <span> tag or so, and adjust the CSS slightly for that.

如果您已经知道中的数据是什么，那么您可以将长文本包装到标签中，然后稍微调整CSS。

UPDATED JSFIDDLE

更新了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>

#5

@Douglas :I think you done all things properly. but as in your given example and in question you said you want narrow header so you given 10px width to th. but if you want to achive 10px width in your example then remove only white-space: nowrap;

@Douglas：我认为你做得很好。但正如在你给出的例子和问题中你说你想要窄头，所以你给了10px宽度。但是如果你想在你的例子中获得10px的宽度，那么只删除white-space：nowrap;

Then it loook like Example 1.

然后就像例1一样。

Example 1: https://jsfiddle.net/2avm4a6n/20/

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

Example 2: As all user given answer you can do that way also

示例2：由于所有用户都给出了答案，您也可以这样做

Example 3: there is another option for you if you want to use white-space: nowrap; then apply one more thing i.e text-overflow: ellipsis; overflow: hidden; https://jsfiddle.net/2avm4a6n/21/

示例3：如果要使用空格，还有另一个选项：nowrap;然后再应用一个东西，即文本溢出：省略号;溢出：隐藏; https://jsfiddle.net/2avm4a6n/21/

 text-overflow: ellipsis;
 overflow: hidden;

EDIT

编辑

And use text-align: left; if you want text to be start from left side

并使用text-align：left;如果你想从左侧开始文字

#6

You can achieve this by giving a width to the "th" and make the text-align:left

你可以通过给“th”增加宽度并使text-align：left来实现这一点

html

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

CSS

table {
    width: 100%;
}

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

Working fiddle: https://jsfiddle.net/2avm4a6n/16/

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