CSS如何使表格的列寬小於內容？

Question

我想讓表格中的一列寬度小於內容。 這是我的代碼：

html :

<table class="table">
    <thead>
        <tr>
            <th class="col1">col1</th>
            <th class="col2">col2</th>
            <th class="col3">col3</th>
            <th class="col4">col4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="col1">aaaaaa</td>
            <td class="col2">aaaaaa</td>
            <td class="col3">aaaaaa</td>
            <td class="col4">aaaaaa</td>
        </tr>
    </tbody>
</table>

scss :

.table {
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

td, th {
    border: 1px solid black;
    padding: 5px 8px;
}

td:first-child, th:first-child {
    width: 10px;
    overflow: hidden;
    white-space: nowrap;
}

據我了解設置table-layout: fixed應該有所幫助，但沒有真正改變。 第一列仍然不是 10px。

那么如何將寬度設置為一列？

Answer 1

您可以嘗試使用max-width代替。

免責聲明：不確定是否所有瀏覽器都會接受它

 .table { margin: 0; padding: 0; border-collapse: collapse; table-layout: fixed; } td, th { border: 1px solid black; padding: 5px 8px; } td:first-child, th:first-child { max-width: 10px; overflow: hidden; white-space: nowrap; }

 <table class="table"> <thead> <tr> <th class="col1">col1</th> <th class="col2">col2</th> <th class="col3">col3</th> <th class="col4">col4</th> </tr> </thead> <tbody> <tr> <td class="col1">aaaaaa</td> <td class="col2">aaaaaa</td> <td class="col3">aaaaaa</td> <td class="col4">aaaaaa</td> </tr> </tbody> </table>

Answer 2

此外，當我將width: 100%添加到表格時，代碼開始工作