如何在全宽度表格中以最大宽度换行表格单元格

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

对于简短的内容，这是有效的:

<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做这个吗?

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

让我知道这是否是你正在寻找的:

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

谢谢，这是接近，但它不应该包装短标题:它应该只在标题列到达max-width

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

如果您已经知道<th>中的数据是什么，那么您可以将长长度文本包装到<span>标记中，并为此稍微调整CSS。

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

如何使用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>

要看到这个操作，你必须使用Chrome，转到chrome://flags并启用启用实验性Web平台功能选项。

显然这在目前没有多大用处，但肯定是值得期待的!

@Douglas:我觉得你做得很好。但是在你的例子中，你说你想要窄头，所以你给了10px宽度到th。但是如果你想在你的例子中实现10px的宽度，那么只删除white-space: nowrap;

那么它看起来像例1。

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

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

示例3:如果你想使用white-space: nowrap;还有另外一个选择，即text-overflow: ellipsis; https://jsfiddle.net/2avm4a6n/21/

<我>

 text-overflow: ellipsis;
 overflow: hidden;

编辑

使用text-align: left;如果你想让文字从左边开始

你可以通过给"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/

相关内容

最新更新

热门标签：