如何在全宽表中以最大宽度包装表格单元格-Java 学习之路

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

内容短，这有效：

<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; 组合使 Headers 列尽可能窄，而不包含空格低于最小宽度的 Headers ，但只有 width: 10px; 和 word-break: break-all; 会导致 Headers 包装成单个字符以适应缩小10px .

知道怎么用css做这个吗？

6 回答

从 th 删除 table width 删除 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>


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


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

回复于 2024-05-13T04:23:13+08:00

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

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


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


<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评论 - may 18th

谢谢，这是关闭的，但它不应该包裹短 Headers ：它应该只在 Headers 列达到最大宽度时开始包装

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


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


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

回复于 2024-05-13T04:23:13+08:00

如果您已经知道 <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>


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


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

回复于 2024-05-13T04:23:13+08:00

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>


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


<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 并启用 Enable experimental Web Platform features 选项 .

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

回复于 2024-05-13T04:23:13+08:00

5

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

然后就像 Example 1 一样 .

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

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

Example 3: 如果您想使用 white-space: nowrap; 然后再申请一件事，还有另一种选择，例如 text-overflow: ellipsis; overflow: hidden; https://jsfiddle.net/2avm4a6n/21/

文本溢出：省略号;
溢出：隐藏;

EDIT

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

回复于 2024-05-13T04:23:13+08:00

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

HTML

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

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

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

回复于 2024-05-13T04:23:13+08:00

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

6 回答

相关问题