将一个表头分成两行

时间:2019-11-05 05:52:41

标签: html html-table bootstrap-table

我有一张桌子,其中一个桌子头必须具有两行,而在第二行中也必须分为4列。简而言之,一个头标签必须分为2行标签,然后再将第二行标签分为4个子标签。

<table class="table">
                    <thead>
                        <tr>
                            <th>A</th>
                            <th>B</th>
                            <th>C</th>
                            <th>D</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>A value</td>
                            <td>B value</td>
                            <td>C1 C2 C3 C4 value</td>
                            <td>D value</td>
                        </tr>
                    </tbody>
                </table>

I want something like this

1 个答案:

答案 0 :(得分:0)

您可以这样做

<table>
  <col>
  <colgroup span="2"></colgroup>
  <colgroup span="2"></colgroup>
  <tr>
    <td rowspan="2"></td>
    <th colspan="2" scope="colgroup">Mars</th>
    <th colspan="2" scope="colgroup">Venus</th>
  </tr>
  <tr>
    <th scope="col">Produced</th>
    <th scope="col">Sold</th>
    <th scope="col">Produced</th>
    <th scope="col">Sold</th>
  </tr>
  <tr>
    <th scope="row">Teddy Bears</th>
    <td>50,000</td>
    <td>30,000</td>
    <td>100,000</td>
    <td>80,000</td>
  </tr>
  <tr>
    <th scope="row">Board Games</th>
    <td>10,000</td>
    <td>5,000</td>
    <td>12,000</td>
    <td>9,000</td>
  </tr>
</table>

more info https://www.w3.org/WAI/tutorials/tables/irregular/