css 如何自动调整HTML表格单元格的大小以适应文本大小

7ivaypg9  于 2022-12-24  发布在  其他
关注(0)|答案(3)|浏览(233)

我有一个表,有2行和可变列。我尝试宽度= 100%的列。所以在视图中的第一个内容将适合。但假设如果我动态地改变内容,那么它不是动态地增加/减少HTML表列的大小。

km0tfn4u

km0tfn4u1#

如果希望单元格根据内容调整大小,则不能指定表格、行或单元格的宽度。
如果您不希望自动换行,请为单元格指定CSS样式white-space: nowrap

ztigrdn8

ztigrdn82#

你可以试试这个:
超文本标记语言

<table>
    <tr>
        <td class="shrink">element1</td>
        <td class="shrink">data</td>
        <td class="shrink">junk here</td>
        <td class="expand">last column</td>
    </tr>
    <tr>
        <td class="shrink">elem</td>
        <td class="shrink">more data</td>
        <td class="shrink">other stuff</td>
        <td class="expand">again, last column</td>
    </tr>
    <tr>
        <td class="shrink">more</td>
        <td class="shrink">of </td>
        <td class="shrink">these</td>
        <td class="expand">rows</td>
    </tr>
</table>

中央支助系统

table {
    border: 1px solid green;
    border-collapse: collapse;
    width:100%;
}

table td {
    border: 1px solid green;
}

table td.shrink {
    white-space:nowrap
}
table td.expand {
    width: 99%
}
bgibtngc

bgibtngc3#

我也在纠结这个问题:我是这么解决的将table-layout: auto;应用于<table>元素。

相关问题