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

I have a table with dynamic number of columns. If table width increases more than 100%, then column width should be minimum width defined in CSS. Otherwise column width should be fit to the content.

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

How can I do it?

我该怎么做?

<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>

1 个解决方案

#1

Simple solution: give width: 100%; to table.

简单解决方案:给出宽度: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>