How to make table column with dynamic width

Question

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.

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>

Answer 1

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

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>