javascript - Twitter Bootstrap を使用して結合されたテーブル セルを作成する

Question

Bootstrap を使用<thead>して 2 つのレベル (例: Summer Period には hildren data1、data2、data3 があります) と、2 つの垂直セル (例: State) を結合したテーブル セルを作成するにはどうすればよいですか?

Excel で表示すると、次のようになります。

Answer 1

Bootstrap で複数行の複雑なヘッダーを作成する方法は、HTML の場合とまったく同じです。Bootstrap の HTML のテーブルは次のとおりです。

<table class="table table-bordered">
  <thread>
    <tr>
      <th>State</th>
      <th>Utilities Company</th>
      <th colspan="3">Summer Period</th>
    </tr>
    <tr>
      <th></th>
      <th></th>
      <th>data1</th>
      <th>data2</th>
      <th>data3</th>
    </tr>
  </thread>
  <tbody>
    ... data here ...
  </tbody>
</table>

データを正しく表示するには、最初のヘッダー行と 2 番目のヘッダー行の間に CSS を追加する必要がある場合があります

Answer 2

<table class="table table-bordered">
  <thread>
    <tr>
      <th rowspan="2">State</th>
      <th rowspan="2">Utilities Company</th>
      <th colspan="3">Summer Period</th>
    </tr>
    <tr>
      <th>data1</th>
      <th>data2</th>
      <th>data3</th>
    </tr>
  </thread>
  <tbody>
    ... data here ...
  </tbody>
</table>