Html 如何在全宽表格中以最大宽度包裹表格单元格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30303351/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to wrap table cell at a maximum width in full width table
提问by Douglas
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.
似乎white-space: nowrap;样式覆盖了word-break: break-all;，因此max-width: 300px;导致文本溢出。我正在使用white-space: nowrap;andwidth: 10px;组合使标题列尽可能窄，而不用最小宽度以下的空格包裹标题，但只有width: 10px;andword-break: break-all;会导致标题包装成单个字符以适应狭窄的 10px。
Any idea how to do this with css?
知道如何用 css 做到这一点吗？
采纳答案by Almis
Remove the tablewidth, from thremove the width, the white-space, and the word-break. Add to the thword-wrap: word-break
取出tablewidth，从th取出width的white-space，和word-break。添加到thword-wrap: word-break
I also suggest you to set min-width: 150pxor any value you want. Also add this td { width: 100%;}.
我还建议你设置min-width: 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>回答by dippas
Let me know if this is what you are looking for:
如果这就是您要找的，请告诉我：
remove white-space:nowrapand word-break:break-alland 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 评论 -may 18th
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-widthto ththat fits you the best.
(Note that thwhich will break words don't receive the min-width) as pointed out by @Panglossin a comment to another answer.
a添加min-width到th适合你的最好的。（请注意，如@Pangloss在对另一个答案的评论中指出的那样，th哪些会打断的话不会收到min-width）。
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>回答by Stickers
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.
如果您已经知道数据是什么<th>，那么您可以将长文本包装成一个<span>标签左右，并为此稍微调整 CSS。
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>回答by Tom Fenech
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://flagsand enable the Enable experimental Web Platform featuresoption.
要查看此操作，您必须使用 Chrome，转到chrome://flags并启用启用实验性 Web 平台功能选项。
Obviously this isn't much use at the moment but certainly something to look forward to!
显然，目前这没有多大用处，但肯定值得期待！
回答by Keval Bhatt
@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 宽度给th。但是如果你想在你的例子中达到 10px 的宽度，那么只删除 空白： 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;
text-overflow: ellipsis;
overflow: hidden;
EDIT
编辑
And use text-align: left; if you want text to be start from left side
并使用 text-align: left; 如果您希望文本从左侧开始
回答by Mohamed Wazil
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/
