以下是我拥有的 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 的长度很大时,调整了它的高度,但输入字段保持不变。我注意在行标题大小增加时也调整输入字段。
输入字段用于保存浮点值。所以需要小宽度否则表格会变大
最佳答案
使用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>
关于jquery - 动态调整列大小的css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39610722/