如何在全宽表中以最大宽度包装表单元格 [英] How to wrap table cell at a maximum width in full width table

问题描述

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

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.

，this works：

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：

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

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

似乎 white-space：nowrap; style覆盖 word-break：break-all; ，因此 max-width：300px; 使文本溢出。我使用 white-space：nowrap; 和 width：10px; 组合使标题列为窄尽可能不使用在最小宽度以下的空格包装标题，但只有 width：10px; 和 word-break：break-all ;

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.

任何想法如何用css做这个？

Any idea how to do this with css?

推荐答案

删除表 width ，从 th 删除 width ，白色空格和 word-break 。添加到 th word-wrap：word-break

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

我还建议你设置 min-width：150px 或任何你想要的值。还要添加 td {width：100％;} 。

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

//jsfiddle.net/Almis/2avm4a6n/18/rel =nofollow> jsFiddle

Here is the 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>

这篇关于如何在全宽表中以最大宽度包装表单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！