在 HTML 表格中调整内容和自动宽度

Question

在下面的示例中，我希望我的表格具有自定义的列宽：

1. 列宽适合内容
2. 占用剩余空间
3. 列宽适合内容
4. 固定列宽

table {
    width: 300px;
    border: 1px solid red;
}

td {
    border: 1px solid blue;
    padding: 0px;
    margin: 0px;
    min-width: 0px;
}

tr td:nth-child(1) { width: fit-content; }
tr td:nth-child(2) { width: auto; }
tr td:nth-child(3) { width: fit-content; }
tr td:nth-child(4) { width: 50px; }

tr th:nth-child(1) { width: fit-content; }
tr th:nth-child(2) { width: auto; }
tr th:nth-child(3) { width: fit-content; }
tr th:nth-child(4) { width: 50px; }

<table>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<table>

不幸的是，它不太有效。

Answer 1

使用一个较小的值（不同于 0）来实现适合内容的行为：

table {
    width: 300px;
    border: 1px solid red;
}

td {
    border: 1px solid blue;
    padding: 0px;
    margin: 0px;
    white-space:nowrap; /* in case you have long content */
}

tr td:nth-child(1) { width: 1px; }
/*tr td:nth-child(2) { width: auto; } not needed */
tr td:nth-child(3) { width: 1px; }
tr td:nth-child(4) { width: 50px; }

tr th:nth-child(1) { width: 1px; }
/*tr th:nth-child(2) { width: auto; } not needed  */
tr th:nth-child(3) { width: 1px; }
tr th:nth-child(4) { width: 50px; }

<table>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr>
<td>a a a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<table>