表中的tr标签未从新行开始

Question

有人可以向我解释为什么第二行不在新行中吗？

$(document).ready(function() {
  $('.rotate').css('height', $('.rotate').width());
});

td {
  border-collapse: collapse;
  border: 1px black solid;
}

th {
  border: 1px black solid;
  border-collapse: collapse;
}

tr {
  text-align: center;
}

.rotate {
  -webkit-transform: rotate(-90.0deg);
  transform: rotate(-90.0deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table cellpadding="10" cellspacing="0" align="center">
  <caption>SCARA GEOCRONOLOGICĂ</caption>
  <tr>
    <th rowspan="2">EON</th>
    <th colspan="2" rowspan="2">ERA</th>
    <th colspan="3" rowspan="2">PERIOADA</th>
    <th colspan="2" rowspan="2">Cicluri orogenice</th>
    <th rowspan="2">Mil. ani în urmă</th>
    <th colspan="4" rowspan="2">Viețuitoare tipice</th>
  </tr>
  <tr>
    <td rowspan="13">FANEROZOIC</td>
    <td colspan="2" rowspan="4">CAINOZOIC(NEOZOIC) Cz</td>
    <td colspan="3">Cuaternar Q</td>
    <td colspan="2" rowspan="3">Ciclul alpin</td>
    <td rowspan="15">0,01</td>
    <td colspan="4">Omul primitiv, mamut, ren, bou moscat, rinocer</td>
  </tr>
</table>

（fiddle）

Answer 1

使用 thead 和 tbody 标签

<table cellpadding="10" cellspacing="0" align="center">
    <caption>SCARA GEOCRONOLOGICĂ</caption>
    <thead>
    <tr>
        <th rowspan="2">EON</th>
        <th colspan="2" rowspan="2">ERA</th>
        <th colspan="3" rowspan="2">PERIOADA</th>
        <th colspan="2" rowspan="2">Cicluri orogenice</th>
        <th rowspan="2">Mil. ani în urmă</th>
        <th colspan="4" rowspan="2">Viețuitoare tipice</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td rowspan="13">FANEROZOIC</td>
        <td colspan="2" rowspan="4">CAINOZOIC(NEOZOIC) Cz</td>
        <td colspan="3">Cuaternar Q</td>
        <td colspan="2" rowspan="3">Ciclul alpin</td>
        <td rowspan="15">0,01</td>
        <td colspan="4">Omul primitiv, mamut, ren, bou moscat, rinocer</td>
    </tr>
    </tbody>
</table>

Answer 2

rowspan="2"元素中的

th（即使在它们的全部中）也没有任何意义。如果将其删除，则会得到一个常规表：

table {
border-collapse: collapse;
}
td, th {
border: 1px dotted #aaa;
}

<table cellpadding="10" cellspacing="0" align="center">
    <caption>SCARA GEOCRONOLOGICĂ</caption>
    <tr>
        <th>EON</th>
        <th colspan="2">ERA</th>
        <th colspan="3">PERIOADA</th>
        <th colspan="2">Cicluri orogenice</th>
        <th>Mil. ani în urmă</th>
        <th colspan="4">Viețuitoare tipice</th>
    </tr>
    <tr>
        <td rowspan="13">FANEROZOIC</td>
        <td colspan="2" rowspan="4">CAINOZOIC(NEOZOIC) Cz</td>
        <td colspan="3">Cuaternar Q</td>
        <td colspan="2" rowspan="3">Ciclul alpin</td>
        <td rowspan="15">0,01</td>
        <td colspan="4">Omul primitiv, mamut, ren, bou moscat, rinocer</td>
    </tr>
</table>

Answer 3

只需将头部分（<th>）的行包含在<thead>标记中，并将该行的另一部分包含在<tbody>中。希望它能按预期工作。

 td {
        border-collapse: collapse;
        border: 1px black solid;
    }
th {
    border: 1px black solid;
    border-collapse: collapse;
}
tr {
    text-align: center;
}
    

  
    <table cellpadding="10" cellspacing="0" align="center">
        <caption>SCARA GEOCRONOLOGICĂ</caption>
        <thead>
            <tr>
                <th rowspan="2">EON</th>
                <th colspan="2" rowspan="2">ERA</th>
                <th colspan="3" rowspan="2">PERIOADA</th>
                <th colspan="2" rowspan="2">Cicluri orogenice</th>
                <th rowspan="2">Mil. ani în urmă</th>
                <th colspan="4" rowspan="2">Viețuitoare tipice</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="13">FANEROZOIC</td>
                <td colspan="2" rowspan="4">CAINOZOIC(NEOZOIC) Cz</td>
                <td colspan="3">Cuaternar Q</td>
                <td colspan="2" rowspan="3">Ciclul alpin</td>
                <td rowspan="15">0,01</td>
                <td colspan="4">Omul primitiv, mamut, ren, bou moscat, rinocer</td>
            </tr>
        </tbody>
    </table>