EL CLUB GANADOR

  • Inicio
  • Premios
  • ¿Cómo participar?
  • Fechas de Sorteo
  • Condiciones y Restricciones

Style – Tables

Default styles

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table>
  …
</table>

Optional classes

Add any of the following classes to the .table base class.

.table-striped

Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table>
  …
</table>

.table-bordered

Add borders and rounded corners to the table.

# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table>
  …
</table>

.table-hover

Enable a hover state on table rows within a <tbody>.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table>
  …
</table>

.table-condensed

Makes tables more compact by cutting cell padding in half.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table>
  …
</table>

Optional row classes

Use contextual classes to color table rows.

Class Description
.success Indicates a successful or positive action.
.error Indicates a dangerous or potentially negative action.
.warning Indicates a warning that might need attention.
.info Used as an alternative to the default styles.
# Product Payment Taken Status
1 TB – Monthly 01/04/2012 Approved
2 TB – Monthly 02/04/2012 Declined
3 TB – Monthly 03/04/2012 Pending
4 TB – Monthly 04/04/2012 Call in to confirm
...
  <tr class="success">
    <td>1</td>
    <td>TB - Monthly</td>
    <td>01/04/2012</td>
    <td>Approved</td>
  </tr>
...

Supported table markup

List of supported table HTML elements and how they should be used.

Tag Description
<table> Wrapping element for displaying data in a tabular format
<thead> Container element for table header rows (<tr>) to label table columns
<tbody> Container element for table rows (<tr>) in the body of the table
<tr> Container element for a set of table cells (<td> or <th>) that appears on a single row
<td> Default table cell
<th> Special table cell for column (or row, depending on scope and placement) labelsMust be used within a <thead>
<caption> Description or summary of what the table holds, especially useful for screen readers
<table>
  <caption>...</caption>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

Deja un comentario Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Recent Posts

  • SEGUROS

    Adquirir un producto del portafolio de seguros ...
  • Productos de Ahorro

    Cuenta Maestra: Apertura o consignación en Cuen...
  • Actualización de datos completa y/o habilidad en aportes

    El asociado podrá recibir una boleta por Actual...

Recent Comments

    Archives

    • agosto 2019

    Featured Posts

    • SEGUROS

      0 comments
    • Productos de Ahorro

      0 comments
    • Actualización de datos completa y/o habilidad en aportes

      0 comments

    Comentarios recientes

      Archives

      • agosto 2019

      Categories

      • ahorro
      • datos
      • seguros

      Meta

      • Acceder
      • Feed de entradas
      • Feed de comentarios
      • WordPress.org

      Search

      Recent Posts

      • SEGUROS

        Adquirir un producto del portafolio de seguros ...
      • Productos de Ahorro

        Cuenta Maestra: Apertura o consignación en Cuen...
      • Actualización de datos completa y/o habilidad en aportes

        El asociado podrá recibir una boleta por Actual...

      Recent Comments

        Categories

        • ahorro
        • datos
        • seguros

        Meta

        • Acceder
        • Feed de entradas
        • Feed de comentarios
        • WordPress.org

        Search

        Recent Posts

        • SEGUROS

          Adquirir un producto del portafolio de seguros ...
        • Productos de Ahorro

          Cuenta Maestra: Apertura o consignación en Cuen...
        • Actualización de datos completa y/o habilidad en aportes

          El asociado podrá recibir una boleta por Actual...

        Recent Comments

          Categories

          • ahorro
          • datos
          • seguros

          Meta

          • Acceder
          • Feed de entradas
          • Feed de comentarios
          • WordPress.org

          Recent Posts

          • SEGUROS

            Adquirir un producto del portafolio de seguros ...
          • Productos de Ahorro

            Cuenta Maestra: Apertura o consignación en Cuen...
          • Actualización de datos completa y/o habilidad en aportes

            El asociado podrá recibir una boleta por Actual...

          INSTAGRAM

          [instagram-feed]

          EL CLUB GANADOR

          © 2019 Daniel Interactivo COOPROFESORES DERECHOS RESERVADOS

          TOP