Question

我有一张桌子，桌子上有2列，横跨整个屏幕。该表可能是这样的：

<table style="width:100%">
   <tr>
       <td>Column1</td>
       <td>Column2</td>
   </tr>
</table>

我希望第1列覆盖所需的宽度，以显示其内容而不强制换行。我不想以像素或百分比为单位指定宽度，因为内容差异很大。

CSS可以实现吗？

Answer 1

我认为可以使用flex并将flex-grow: 1分配给您希望跨越剩余宽度的列来实现：

tr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    flex-direction: row;

    align-items: stretch;
    justify-content: center;

    flex-wrap: wrap;

    background-color: orange;
}
td {
    width: auto;
    background-color: red;
}
td:nth-of-type(2) {
    flex-grow: 1;
    background-color: green;
}

<table style="width:100%">
    <tr>
        <td>Column1</td>
        <td>Column2</td>
    </tr>
</table>

如何在表格中定义最小列宽

1 个答案: