Question

我有一个包含三列的HTML表。在第二列中，我添加了如下所示的简单样式。

table {
  border: 1px solid black;
}

.requiredBar {
  background-color: #c00;
}

.requiredCol {
  width: 1px;
  max-width: 1px;
}

<table>
  <tr>
    <td>Name</td>
    <td class="requiredCol requiredBar">&nbsp;</td>
    <td><input type="text" /></td>
  </tr>
  <tr>
    <td>Password</td>
    <td class="requiredCol requiredBar">&nbsp;</td>
    <td><input type="text" /></td>
  </tr>

</table>

我得到的输出是这样的。显示的红色条实际上是一列。我正在尝试减小其高度，而不更改同一行中其他单元格的高度。

是否可以更改同一行html表中某些单元格的高度（在这种情况下为红色条形）？

Answer 1

您可以在requiredCol内添加一个div并设置其高度

table {
  border: 1px solid black;
}

.requiredBar {
  background-color: #c00;
  height: 10px;
  width: 2px;
  display: block;
}

.requiredCol {
  width: 2px;
}

<table>
  <tr>
    <td>Name</td>
    <td class="requiredCol">
      <div class="requiredBar"></div>
    </td>
    <td><input type="text" /></td>
  </tr>
  <tr>
    <td>Password</td>
    <td class="requiredCol">
      <div class="requiredBar"></div>
    </td>
    <td><input type="text" /></td>
  </tr>
</table>

Answer 2

如果不更改表中的行高（实际上是标准），就不能更改一个单元格的高度，这会导致表更改表中的其他一些单元格。

如果要订购一些标签（在这种情况下为输入和标签），最好使用CSS网格布局而不是表格。

如果您坚持使用表格，则可以设置item的位置，该位置通过flexbox保留在单元格中，而无需更改确切的单元格。 flex布局的主要思想是使容器能够更改其项目的宽度/高度（和顺序），以最好地填充可用空间。

更改HTML表格中表格单元格的高度

2 个答案: