时间戳

首页 > 解决方案 > html中的表格问题

html - html中的表格问题

问题描述

我想在 html 中创建这个表

https://i.stack.imgur.com/cluOC.png

我试过这段代码：

<table>
  <tr>
    <th class="blue" colspan="3">3</th>
    <th class="orange " rowspan="2">2</th>
    <th class="blue" colspan="3">3</th>
  </tr>
  <tr>
    <td class="cyan" rowspan="4">4</td>
    <td class="cyan">1</td>
    <td class="cyan">1</td>
    <td class="cyan">1</td>
    <td class="cyan">1</td>
    <td class="cyan" rowspan="4">4</td>
  </tr>
  <tr>
    <td class="orange" colspan="2">2</td>
    <td class="orange" rowspan="3">3</td>
    <td class="orange" colspan="2">2</td>
  </tr>
  <tr>
    <td class="cyan" rowspan="2">2</td>
    <td class="cyan" rowspan="2">2</td>
    <td class="cyan" rowspan="2">2</td>
    <td class="cyan" rowspan="2">2</td>

  </tr>
  <tr>

  </tr>
  <tr>
    <td class="green" colspan="2">2</td>
    <td class="orange">1</td>
    <td class="cyan">1</td>
    <td class="orange">1</td>
    <td class="green" colspan="2">2</td>
  </tr>

</table>

但输出是这样的，其中一行（倒数第二行）没有显示

https://i.stack.imgur.com/Nmdtl.png

我该如何解决？

标签： htmlcsshtml-table

解决方案

首先，您的第 5“行”并不是真正的行 - 它不包含任何单元格。如果行中没有内容，则行没有任何高度。如果您创建第 5 行只是为了使其上方的单元格更高，那么您最好使用height单元格上的设置。

您可以将height设置应用于第 4 行中的一个单元格，该设置是其他（“常规”）单元格的两倍。我使用x下面示例中的类来做到这一点。

table {
min-width: 400px;
border-collapse: collapse;
}
th, td {
border: 1px solid #555;
height: 60px;
text-align: center;
}
.x {
height: 120px;
}
<table>
            <tr>
                <th class="blue" colspan="3">3</th>
                <th class="orange " rowspan="2">2</th>
                <th class="blue" colspan="3">3</th>
            </tr>
            <tr>
                <td class="cyan" rowspan="4">4</td>
                <td class="cyan">1</td>
                <td class="cyan">1</td>
                <td class="cyan">1</td>
                <td class="cyan">1</td>
                <td class="cyan" rowspan="4">4</td>
            </tr>
            <tr>
                <td class="orange" colspan="2">2</td>
                <td class="orange" rowspan="3">3</td>
                <td class="orange"  colspan="2">2</td>
            </tr>
            <tr>
                <td class="cyan x" rowspan="2">2</td>
                <td class="cyan" rowspan="2">2</td>
                <td class="cyan" rowspan="2">2</td>
                <td class="cyan" rowspan="2">2</td>

            </tr>
            <tr>                

            </tr>
            <tr>                
                <td class="green" colspan="2">2</td>
                <td class="orange">1</td>
                <td class="cyan">1</td>
                <td class="orange">1</td>
                <td class="green" colspan="2">2</td></tr>  

        </table>

推荐阅读