如何使表格列具有动态宽度

Question

我有一个带有动态列数的表。如果表宽度增加超过100％，则列宽度应为CSS中定义的最小宽度。否则，列宽应适合内容。

我该怎么做？

<style>
table {
    table-layout: fixed;
    width: auto;
}
td {
    min-wdith: 250px;
}
</style>

<table>
    <tr>
        <td>
            Col 1
        </td>
        <td>
            Col 2
        </td>
        <td>
            Col 3
        </td>
        <td>
            Col 4
        </td>
    </tr>
</table>

Answer 1

简单的解决方案：给width: 100%;表。

table {
    table-layout: fixed;
    width: 100%;
    border:1px solid;
    margin-top:20px;
    border-collapse: collapse;
}
td {
    min-width: 250px;
    border:1px solid;
}

<table>
    <tr>
        <td>
            Col 1
        </td>
        <td>
            Col 2
        </td>
        <td>
            Col 3
        </td>
        <td>
            Col 4
        </td>
    </tr>
</table>

<table>
    <tr>
        <td>
            Col 1
        </td>
        <td>
            Col 2
        </td>
        
    </tr>
</table>