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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

您需要设置单元格宽度th＆amp; td table-layout to＆＃39; fixed＆＃39;就像我在css代码中提到的那样。如果表的总大小为500px且有5列，则每列将具有100px。

＆＃13;

table{
    border: 1px solid black;
    table-layout: fixed;
    width: 500px;
}

th, td {
    border: 1px solid black;
    width: 100px;
}

＆＃13;

Answer 2

您需要确定标题TD的大小。因此，身体的TD会自动采用标题TD中的宽度。

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

2 个答案: