Home / Questions / 40610
Accepted
El Cóndor
Asked: 2020-12-23 12:17:30 +0800 CST 2020-12-23 12:17:30 +0800 CST

如何自定义 HTML 表格中的行高？

  • 772

我有以下代码html来创建一个表，我把它作为一个例子，我希望我的表的行看起来更宽（如果它有效）并且相同的行看起来更高（它不起作用），做一些研究我找到了下一步：

该属性height并非在所有浏览器中都有效，并且它的使用并不广泛。单元格通常具有适合所有已插入内容所需的高度，也就是说，它们长得足以容纳我们放入的内容。

我可以直接做我想做的事HTML还是应该做CSS？

  <table>
      <tr style="width:130%; height:150%;">
        <td>Enero</td>
        <td>$100</td>
      </tr>
      <tr>
        <td>Febrero</td>
        <td>$80</td>
      </tr>
    </table>
html

2 Answers

  1. Best Answer

    为此目的使用：

    • 最小宽度（宽度）
    • 高度（为您提供实际高度）
    • min-height（最小高度）
    • max-height（最大高度）

    .headt td {
  min-width: 235px;
  height: 100px;
  background-color: #433;
}

table {
  color: #4ef;
}
    <table>
  <tr class="headt">
    <td>Enero</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>$80</td>
  </tr>
</table>

    注意：您不能使用百分比，因为这样说，它parent element必须有一个明确的高度，而它没有。

    • 6

  2. 使用CSS，您可以使用height, 来指示高度。

    例子：

    table {
  border: 1px solid #000;
  border-collapse: collapse;
}
table td {
  border: 1px solid #000;
  text-align: center;
  padding: 5px;
  /* Alto de las celdas */
  height: 70px;
}
    <table>
  <tr>
    <td>Enero</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>$80</td>
  </tr>
</table>

    注意：min-height并max-height直接应用在 a 上td是行不通的，因为根据spec效果对这些没有定义：

    在 CSS 2.1 中，'min-height' 和 'max-height' 对表格、内联表格、表格单元格、表格行和行组的影响是未定义的。

    • 3