如何制作动态宽度的表格列

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>