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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;
＆＃13;
table { width: 100%; } th { text-align: right; white-space: nowrap; } th span { white-space: normal; word-break: break-all; display: block; } td { width: 100%; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 4

一些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并启用启用实验性网络平台功能选项。

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

Answer 5

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

然后它就像示例1 一样。

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

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

示例3：如果您想使用 white-space：nowrap; ，还有另外一个选项，那么还有一个选项，即文本溢出：省略;溢出：隐藏; {{3}}

的

的
text-overflow: ellipsis; overflow: hidden;

的

修改

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

Answer 6

你可以通过给'＆＃34; th＆＃34;并使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/

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

6 个答案: