html - 如何创建一个表格，第一列的宽度设置为适合内容，其余的在整个容器宽度上等间距？

Question

我正在努力创建一个表格，其中第一列的大小适合内容，其余列的宽度相等以填充容器的其余部分。

现在，我能够使所有列的宽度相等（见下文）。但如果需要，我希望第一列更宽（最小宽度以适合所有内容）以容纳其内容。可能吗？

下面是问题的说明：

    table {  
      table-layout: fixed;
      width: 100%;
    }
    
    table > tbody > tr > th {
        white-space: nowrap;
    }

<table border="1">
    <caption>Table Name</caption>
     <thead>
       <tr>
         <th></th>
         <th>Col 1</th>
         <th>Col 2</th>
         <th>Col 3</th>
       </tr>   
     </thead>
     <tbody>
       <tr>
         <td>Long Row header</td>
         <td>1</td>
         <td>2</td>
         <td>3</td>
       </tr>
       <tr>
         <td>Row 2</td>
         <td>1</td>
         <td>2</td>
         <td>3</td>
       </tr>   
     </tbody>
    </table>

小提琴：https ://jsfiddle.net/orlenok41/jubkmgva/11/

标签： htmlcss

Answer 1

您可以删除表格固定布局并尝试以下方式：

table {  
  width: 100%;
}

table > tbody > tr > th {
    white-space: nowrap;
    width: 1px;
}

table > tbody > tr > td {
    white-space: nowrap;
    width: auto;
}

如果您的列数不同于 3，则应更改最后一条规则的百分比