等宽和固有宽度表

Question

我的应用程序中的所有表格都设计为其内容的大小。 当页面上有多个表时，由于它们的宽度不同，缺少 alignment 看起来很糟糕。 我想让不太宽的桌子扩大到更宽的桌子的宽度。 这很容易使用包含设置为width: fit-content和设置为 100% 的表。 例如：

<div>
<table>standard table code here</table>
<table>standard table code here</table>
</div>

div {
width: fit-content;
}

table {
 width: 100%;
}

问题是我希望较窄表上的任何多余可用空间出现在右侧，而不是分布在整个表中（如本例所示）。

我想要达到的效果是这样的：

使用 CSS 网格，这将很容易通过使用fr单元来占用任何可用空间（此处 Codepen 示例使用 CSS 子网格，因此在 Chrome 中还不能工作）。 虽然我可以实现我想要的布局，但我需要使用 HTML 表来实现它，以便在语义上是正确的。 这可能吗？

也许相关：有时表中的列会是text-align: right 。

Answer 1

如果您知道不需要将文本拆分为多行，则可以将最后一列宽度设置为 100% 并使用空格：nowrap 如下

 table { border: solid 1px #EDEEEF; border-collapse: seperate; border-spacing: 0; text-align: left; border-radius: 3px; width: 100%; } td, th { padding-left: 40px; white-space:nowrap; } td:last-child { width:100%; } td:first-child, th:first-child { padding-left: 16px; } td:last-child, th:last-child { padding-right: 16px; } thead th { background-color: #F7F7F8; color: #585858; border-bottom: solid 1px #EDEEEF; } td { color: #686868; } tr:not(:last-child) td { border-bottom: solid 1px #F7F7F8; } td, th { padding-block: 8px; }.align-right { text-align: right; } thead th:first-child { border-top-left-radius: 2px; /* needs to be 1px less than the border-radius of the table */ } thead th:last-child { border-top-right-radius: 2px; } tr:hover { background-color: #F7F7F8; } div { width: fit-content; }.mt-medium { margin-top: 24px; }

 <div> <table class="smaller-table"> <thead> <tr> <th>Name</th> <th>Lorem ipsum</th> <th class="align-right">Mean</th> </tr> </thead> <tbody> <tr> <td>something</td> <td>something else</td> <td class="align-right">23</td> </tr> <tr> <td>something</td> <td>something else</td> <td class="align-right">23</td> </tr> <tr> <td>something</td> <td>something else</td> <td class="align-right">23</td> </tr> </tbody> </table> <table class="mt-medium"> <thead> <tr> <th>Name</th> <th>Lorem ipsum</th> <th>Lorem ipsum</th> <th>Lorem ipsum</th> <th class="align-right">Mean</th> </tr> </thead> <tbody> <tr> <td>something</td> <td>something else</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td class="align-right">23</td> </tr> <tr> <td>something</td> <td>something else</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td class="align-right">23</td> </tr> <tr> <td>something</td> <td>something else</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td class="align-right">23</td> </tr> </tbody> </table> </div>

Answer 2

我用右侧额外列中的空表格单元格解决了这个问题：

.spacer {
  width: 100%;
}

这会强制所有其他表格单元格中的文本换行，您可以使用以下命令进行更改：

th, td {
  white-space: nowrap;
}