表格中的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>

（Qazxswpoi）

Answer 1

使用fiddle和thead标签

tbody

Answer 2

<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>

元素中的rowspan="2"（即使在所有这些元素中）也没有多大意义。如果你删除它，你会得到一个常规表：

th

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

Answer 3

只需在

<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>

标签中包含一排头部（<th>），在<thead>中包含该行的另一部分。希望它能帮助您按预期工作。

<tbody>

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