html - CSS 表格列最小宽度等于文本大小

Question

我有一个简单的 HTML 表格，如下所示。

这是一个响应式表格，当浏览器缩小时它会缩小。

我想将列的最小宽度设置为与标题文本一样宽。

在 CSS 中执行此操作的最佳方法是什么？

       <table>
       <thead class="ui-datatable-thead">
           <tr class="ui-state-default">
               <th class="ui-state-default">COL HEADER</th>
           </tr>
       </thead>
       <tbody class="ui-datatable-data ui-widget-content">
          <tr class="ui-widget-content ui-datatable-odd">
              <td>DATA</td>
          </tr>
       </tbody>
       </table>

我看过其他一些答案，但还没有找到解决方案。

Answer 1

table {
    display: table;
    width: 100%;
    table-layout: fixed;
    margin-bottom: 20px;
}

th,td {
    display: table-cell;
    border: 1px dotted red;
    padding: 4px 6px;
    width: 2%;
    margin-bottom: 0;
}

<table>
       <thead class="ui-datatable-thead">
           <tr class="ui-state-default">
               <th class="ui-state-default">COL HEADER 1</th>
               <th class="ui-state-default">COL HEADER 2</th>
               <th class="ui-state-default">COL HEADER 3</th>
           </tr>
       </thead>
       <tbody class="ui-datatable-data ui-widget-content">
          <tr class="ui-widget-content ui-datatable-odd">
              <td>DATA 1</td>
              <td>DATA 2</td>
              <td>DATA 3</td>
          </tr>
       </tbody>
       </table>

所有你需要将单元格宽度 th & td table-layout 设置为“固定”。就像我在 css 代码中提到的那样。如果表格的总大小为 500 像素并且有 5 列，则每列将有 100 像素。

table{
    border: 1px solid black;
    table-layout: fixed;
    width: 500px;
}

th, td {
    border: 1px solid black;
    width: 100px;
}