具有双高的 HTML 表格行答案

【问题标题】：HTML table row with double height具有双高的 HTML 表格行
【发布时间】：2020-12-03 21:04:13
【问题描述】：

我正在尝试将具有双倍高度的行添加到其他行的行。但无法制作。不知道出了什么问题。

 <table border="1">
  <tr>
    <td rowSpan="2">A1</td>
    <td rowSpan="2">A2</td>
    <td rowSpan="2">A3</td>
    <td rowSpan="2">A4</td>
  </tr>
  <tr>
  </tr>
  <tr>
    <td>C1</td>
    <td>C2</td>
    <td>C3</td>
    <td>C4</td>
  </tr>
</table>

【问题讨论】：

标签： html

【解决方案1】：

你需要一些 CSS 来设置行的高度；

table td, tr {
  height: 30px;
}

table td, tr {
  height: 30px;
}

<table border="1">
    <tbody>
        <tr>
            <td rowSpan="2">A1</td>
            <td rowSpan="2">A2</td>
            <td rowSpan="2">A3</td>
            <td rowSpan="2">A4</td>
        </tr>
        <tr>
        </tr>
            <tr>
            <td>C1</td>
            <td>C2</td>
            <td>C3</td>
            <td>C4</td>
        </tr>
    </tbody>
</table>

注意；您应该在表格中添加tbody； What is the purpose for HTML's tbody?

【讨论】：

【解决方案2】：

你想这样做吗？

<table border="1">
    <tr>
        <td>A1</td>
        <td>A2</td>
        <td>A3</td>
        <td rowspan="2">A4/B4 <br>(2 rows)</td>
    </tr>
    <tr>
        <td>B1</td>
        <td>B2</td>
        <td>B3</td>
    </tr>
    <tr>
        <td>C1</td>
        <td colspan="2">C2/C3 <br>(2 cols)</td>
        <td>C4</td>
    </tr>
</table>

【讨论】：

【解决方案3】：

只有在尝试让一个单元格出现在两行中时才应使用 rowspan 属性（就像您在 Excel 上使用合并单元格功能一样）。如果你想让一行比另一行高两倍，这是一个显示属性，应该使用 css 或内联样式来完成。中间（行）也应该去掉。

如果这只是一个一般示例，并且您需要在更复杂的事情上使用它。如果您在 1 个元素上使用 rowspan，则需要确保下一行的 td 元素少 1 个，否则将无法正确显示。

 <table border="1">
  <tr style="height: 50px">
    <td >A1</td>
    <td >A2</td>
    <td >A3</td>
    <td >A4</td>
  </tr>
  <tr>
    <td>C1</td>
    <td>C2</td>
    <td>C3</td>
    <td>C4</td>
  </tr>
</table>

【讨论】：