Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

第一列正确设置为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>

Answer 2

您可以为表提供全宽，然后根据提供的数据调整列。

HTML：

<table class="my_table">
       <tr>
          <th>header 1</th>
          <th>header 2</th>
          <th>header 3</th>
       </tr>
       <tr>
          <td>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>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>

CSS：

  .my_table
    {
        text-align: center;
        width:100%;
        vertical-align: middle;
        background-color: gainsboro;
    }

Css用于动态调整列大小

2 个答案: