html - 更改html表格中表格单元格的高度

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>