Crear celdas de tabla combinadas usando Twitter Bootstrap

¿Cómo podemos usar Bootstrap para crear <thead> con 2 niveles (p. ej., Summer Period tiene datos hildren 1, data2, data3) y también celdas de tabla que fusionaron 2 celdas verticales (p. ej.: Estado)?

Así es como se ve en Excel:

No estoy seguro de cómo hacerlo exactamente con Bootstrap, pero sé cómo hacerlo en HTML:

Puede utilizar una combinación de los colspan y rowspan atributos, donde rowspan se utiliza para encabezados de tabla que abarcan varios filasy lo mismo se aplica a colspan y columnas.

1. Divide los encabezados de tu tabla en filas, según sus niveles.
   Por lo tanto, la primera fila de la tabla consistirá en sus encabezados “principales”, es decir, los encabezados bajo los cuales se ubicarán todos los demás encabezados y datos.

2. Su primera fila debe tener 3 columnas: State, Utilities Company y Summer Period.

3. Agregue filas de encabezado posteriores para cada nivel que profundice. Aquí, su próxima fila será simplemente los encabezados de la tabla para cada conjunto de datos.

Apliquemos los atributos:

1. tu primero th por Estado se extiende 2 filaspor lo que sumamos rowspan="2".
2. Lo mismo se aplica al siguiente encabezado de la tabla, Empresa de servicios públicos.
3. Período de verano se extiende 1 fila y 3 columnaspor lo que sumamos colspan="3"
4. Agrega otro tr en el encabezado, que contiene las 3 celdas para datos1, datos2 y datos3.

El HTML resultante se ve así:

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

Aquí hay un violín de demostración.

Aquí hay una demostración actualizada (en realidad restablecida como base) que incluye bootstrap.css aunque literalmente no hace nada violín de demostración actualizado.

Crear un encabezado complejo con varias líneas en Bootstrap es exactamente igual que en HTML. Aquí está su tabla en HTML para Bootstrap:

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

Es posible que deba agregar algo de CSS entre la primera y la segunda fila de encabezado para mostrar sus datos correctamente

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