jquery - 动态调整列大小的css

Question

以下是我拥有的 html 表格代码。

    .table_header
    {
    	text-align: center;
    	width:50px;
    	vertical-align: middle;
    	background-color: gainsboro;
    }

  <table>
       <tr>
          <th class="table_header"></th>
          <th class="table_header">header 1</th>
          <th class="table_header">header 2</th>
       </tr>
       <tr>
          <td class="table_header">very large row header 1</td>
          <td><input class="qty_input" value="0" type="text"/></td>
          <td><input class="qty_input" value="0" type="text"/></td>
       </tr>
       <tr>
          <td class="table_header">row header 2</td>
          <td><input class="qty_input" value="0" type="text"/></td>
          <td><input class="qty_input" value="0" type="text"/></td>
       </tr>
    </table>

第一列正确设置为 50px。但是所有其他列都有不同的大小。所以我为 td 和输入字段提供了宽度为 40px 的样式。它部分修复了，但问题是当行标题名称 id 的长度很大时，调整了它的高度，但输入字段保持不变。我注意在行标题大小增加时也调整输入字段。

输入字段用于保存浮点值。所以需要小宽度否则表格会变大

Answer 1

使用thead 和tbody。试试这个标记:

<table>
  <thead>
    <tr>
      <th class="table_header">header 1</th>
      <th class="table_header">header 2</th>
      <th class="table_header">header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="table_header">very large row header 1</td>
      <td><input class="qty_input" value="0" type="text"/></td>
      <td><input class="qty_input" value="0" type="text"/></td>
    </tr>
    <tr>
      <td class="table_header">row header 2</td>
      <td><input class="qty_input" value="0" type="text"/></td>
      <td><input class="qty_input" value="0" type="text"/></td>
    </tr>
  </tbody>
</table>