тег 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>

( скрипка )

Answer 1

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 2

Просто включите ряд головной части (<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>

Answer 3

Использование 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>