¿Cómo podemos usar Bootstrap para crear <thead> con 2 niveles (por ejemplo: el Período de Verano tiene hijos data1, data2 data3) y también las celdas de la tabla que se fusionó 2 vertical de las células (por ejemplo:Estado)?

Aquí se ve en Excel:

La creación de fusionó las celdas de la tabla usando Twitter Bootstrap

  • el uso de colspan="n" para cada celda, que debe, a continuación, agregue el padre de la fila de ancho completo
InformationsquelleAutor Nyxynyx | 2013-07-26

3 Comentarios

  1. 45

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


    Puede utilizar una combinación de la colspan y rowspan atributos, donde rowspan se utiliza para los encabezados de tabla que abarca múltiples filas, y lo mismo se aplica a colspan y columnas.

    1. Romper la tabla de cabeceras de filas, de acuerdo con sus niveles.

      Así que la primera fila de la tabla constará de su «padre» encabezados, es decir, los encabezados de cada una de las otras encabezado y parte de los datos se va a caer bajo.

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

    3. Agregue más filas de encabezado para cada nivel de perforar hacia abajo. Aquí, el siguiente de la fila va a ser simplemente los encabezados de tabla para cada conjunto de datos.


    Vamos a aplicar los atributos:

    1. Su 1er th para Estado abarca 2 filas, por lo tanto, añadir rowspan="2".
    2. Lo mismo se aplica a la siguiente encabezado de la tabla, Utilidades de la Empresa.
    3. Período de verano abarca 1 fila y 3 columnas, por lo tanto, añadir colspan="3"
    4. Agregar otro tr en el encabezado, que contiene las 3 celdas para data1, data2 y data3.

    El HTML resultante se parece a esto:

    <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í es un demo de violín.

    Aquí una actualización de demostración (en realidad reset como base), incluyendo bootstrap.css aunque literalmente no hace nada demo de violín actualizado.

    • Muy el respuesta, pero el formato era una especie de «poco atractivo». Me dio un make-over. Siéntase libre de volver si no te gusta 🙂
    • Su ejemplo no importar Bootstrap css. Esta no es la solución para aquellos que quieran Bootstrap de la cuadrícula fluida.
    • dicen que para el usuario que la ha aceptado
  2. 2

    La creación de un complejo de encabezado con varias líneas en Bootstrap es exactamente como en HTML. Aquí está la tabla en HTML para el 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>

    Puede que tenga que agregar un poco de CSS entre su primera y segunda fila de encabezado para mostrar sus datos correctamente

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

Dejar respuesta

Please enter your comment!
Please enter your name here