Как добавить строки текста между строками таблицы начальной загрузки?

Question

Я пытался создать таблицу в бутстрапе с строками текста между строками, чтобы разграничить различные группы в таблице, не дублируя заголовок и не создавая несколько таблиц. Вот пример того, что я пытался сделать.

<div class="table-responsive"> 
    <table class='table'> 
    <thead> 
     <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     </tr> 
    </thead> 

    <tbody> 
     <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     </tr> 
    </tbody> 

    <tr> 
     <td> 
     A sub-header introducing a different group of data. 
     </td> 
    </tr> 

    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
    </tr> 
    <tr> 
    </table> 

    <h3>Another sub-header introducing a different group of data</h3> 

    <table class='table'> 
    <!-- Header is omitted --> 

    <tbody> 
     <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

Создание новой строки таблицы и сделать подзаголовок первый и единственный столбец строки выглядит плохо, потому что текст сжимается в эту одну колонку. Я также попытался создать новую таблицу и просто опустить заголовок, заменив это тегом заголовка, размещенным между двумя таблицами. Это привело к смещению всех исходных строк, так как у них не было заголовка, чтобы совпасть. Все, что я хочу, это строка текста, которую я могу вставить между строками таблицы, не нарушая структуру таблицы.

Answer 1

У вас есть 3 столбца в строке выше, вы должны иметь Colspan свойство: Суб-заголовок, представляя другую группу данных.

Answer 2

Вам нужно использовать ту же таблицу и использовать colspan для выполнения нескольких случаев. <td colspan="2">blabla</td>

Answer 3

Попробуйте пример спецификации HTML5 для очерчивания различных строк, с помощью объединения использования <tbody>, <th scope="rowgroup">, <th scope="row">:

<table> 
<caption>Measurement of legs and tails in Cats and English speakers</caption> 
<thead> 
<tr> <th> ID <th> Measurement <th> Average <th> Maximum 
<tbody> 
<tr> <td> <th scope=rowgroup> Cats <td> <td> 
<tr> <td> 93 <th scope=row> Legs <td> 3.5 <td> 4 
<tr> <td> 10 <th scope=row> Tails <td> 1 <td> 1 
</tbody> 
<tbody> 
<tr> <td> <th scope=rowgroup> English speakers <td> <td> 
<tr> <td> 32 <th scope=row> Legs <td> 2.67 <td> 4 
<tr> <td> 35 <th scope=row> Tails <td> 0.33 <td> 1 
</tbody> 
</table> 

Источник: HTML5 спецификации, 4.9.10 The th element