Tabla

Datos

Componente para ordenar valores relacionados en filas y columnas.

Table

Mostrar parámetros

Parámetros Nunjucks del componente: "Table"

              params:
- name: rows
  type: array
  required: true
  description: Array of table rows and cells.
  params:
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text for cells in table rows. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML for cells in table rows. If `html` is provided, the `text` argument will be ignore
  - name: classes
    type: string
    required: false
    description: Classes to add to the table row cell.
  - name: colspan
    type: integer
    required: false
    description: Specify how many columns a cell extends.
  - name: rowspan
    type: integer
    required: false
    description: Specify how many rows a cell extends.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the table cell.
- name: head
  type: array
  required: false
  description: Array of table head cells.
  params:
  - name: text
    type: string
    required: false
    description: If `html` is set, this is not required. Text for table head cells. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: false
    description: If `text` is set, this is not required. HTML for table head cells. If `html` is provided, the `text` argument will be ignore
  - name: classes
    type: string
    required: false
    description: Classes to add to the table head cell.
  - name: colspan
    type: integer
    required: false
    description: Specify how many columns a cell extends.
  - name: rowspan
    type: integer
    required: false
    description: Specify how many rows a cell extends.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the table cell.
- name: foot
  type: array
  required: false
  description: Array of table tfoot cells.
  params:
  - name: text
    type: string
    required: false
    description: If `html` is set, this is not required. Text for table tfoot cells. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: false
    description: If `text` is set, this is not required. HTML for table tfoot cells. If `html` is provided, the `text` argument will be ignore
  - name: classes
    type: string
    required: false
    description: Classes to add to the table tfoot cell.
  - name: colspan
    type: integer
    required: false
    description: Specify how many columns a cell extends.
  - name: rowspan
    type: integer
    required: false
    description: Specify how many rows a cell extends.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the table cell.
- name: caption
  type: string
  required: false
  description: Caption text
- name: captionClasses
  type: string
  required: false
  description: Classes for caption text size. Classes should correspond to the available typography heading classes.
- name: firstCellIsHeader
  type: boolean
  required: false
  description: If set to true, first cell in table row will be a TH instead of a TD.
- name: wrapper
  type: object
  required: false
  description: Options for a wrapper div outside the table
  params:
  - name: classes
    type: string
    required: false
    description: Classes to add to the wrapper (e.g. to show an horizontal scrollbar it there are many columns or in mobile)
  - name: attributes
    type: object
    required: false
    description: HTML attributes to add to the wrapper div. For accessibility it needs tabindex=0, role=section and aria-label or aria-labelledby.
- name: classes
  type: string
  required: false
  description: Classes to add to the table container.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the table container.

accessibilityCriteria: |
  ## Las tablas deben:
    1. Debe tener al menos una celda de encabezado (TH) en las filas o columnas exteriores.
    2. Si la tabla tiene más de un nivel de encabezado (si hay elementos th en dos filas o en dos columnas) las celdas de datos y de encabezado deben estar asociadas con los atributos id (en los th) /headers (en los td).
    3. El título de la tabla debe estar marcado como <caption>
    4. La primera fila de la tabla no puede tener todas las celdas unidas, o se interpreta que se está simulando un caption.
    5. Después de un encabezado (h1, h2…) no puede ir directamente una tabla, o se entiende que se está usando el encabezado para lo que debería ser el <caption>
    6. La tabla debe tener una descripción especialmente si la tabla es grande o compleja, tiene varios niveles de encabezados, tiene totales o enlaces, etc. La descripción intenta suplir la primera impresión que tienen de la tabla las personas que pueden verla, por ejemplo, vemos que en la última columna hay enlaces o en la última fila hay totales. Como en HTML 5 ya no está admitido el atributo summary en las tablas, lo que se hace es poner la descripción en un párrafo antes de la tabla y asociarlo a la tabla con aria-describedby (así se evita también el error 5). El caption y la descripción no deben ser iguales.
    7. El validador del OAW dará error si hay tablas de una única columna y 3 o más filas con texto menor de 150 caracteres, pues considerará que se está simulando una lista.

Tabla por defecto #

Caption de la tabla
Mes de pago	Primer pago	Segundo pago
Enero	85€	95€
Febrero	75€	55€
Marzo	165€	125€

Mostrar código

Contenido

Nunjucks macro

{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
  "caption": "Caption de la tabla",
  "captionClasses": "sr-only mb-base font-bold text-left text-lg",
  "head": [
    {
      "text": "Mes de pago"
    },
    {
      "text": "Primer pago",
      "classes": "lg:text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "lg:text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "lg:text-right"
      },
      {
        "text": "55€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "lg:text-right"
      },
      {
        "text": "125€",
        "classes": "lg:text-right"
      }
    ]
  ]
}) }}

HTML

<!-- table -->
<table class="c-table">
  <caption class="sr-only mb-base font-bold text-left text-lg">Caption de la tabla</caption>
  <thead class="sr-only lg:not-sr-only">
    <tr class="border-t border-b border-neutral-base">
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">Mes de pago</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:text-right">Primer pago</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:text-right">Segundo pago</th>
    </tr>
  </thead>
  <tbody>
    <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm" data-label="Mes de pago">Enero</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">85€</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">95€</td>
    </tr>
    <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm" data-label="Mes de pago">Febrero</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">75€</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">55€</td>
    </tr>
    <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm" data-label="Mes de pago">Marzo</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">165€</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">125€</td>
    </tr>
  </tbody>
</table>
<!-- /table -->

Tabla con tfoot #

Caption de la tabla
Mes de pago	Primer pago	Segundo pago
Enero	85€	95€
Febrero	75€	55€
Marzo	165€	125€
Suma	325€	275€

Mostrar código

Contenido

Nunjucks macro

{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
  "caption": "Caption de la tabla",
  "captionClasses": "sr-only mb-base font-bold text-left text-lg",
  "head": [
    {
      "text": "Mes de pago"
    },
    {
      "text": "Primer pago",
      "classes": "lg:text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "lg:text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "lg:text-right"
      },
      {
        "text": "55€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "lg:text-right"
      },
      {
        "text": "125€",
        "classes": "lg:text-right"
      }
    ]
  ],
  "foot": [
    {
      "text": "Suma",
      "classes": "uppercase"
    },
    {
      "text": "325€",
      "classes": "lg:text-right"
    },
    {
      "text": "275€",
      "classes": "lg:text-right"
    }
  ]
}) }}

HTML

<!-- table -->
<table class="c-table">
  <caption class="sr-only mb-base font-bold text-left text-lg">Caption de la tabla</caption>
  <thead class="sr-only lg:not-sr-only">
    <tr class="border-t border-b border-neutral-base">
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">Mes de pago</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:text-right">Primer pago</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:text-right">Segundo pago</th>
    </tr>
  </thead>
  <tbody>
    <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm" data-label="Mes de pago">Enero</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">85€</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">95€</td>
    </tr>
    <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm" data-label="Mes de pago">Febrero</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">75€</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">55€</td>
    </tr>
    <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm" data-label="Mes de pago">Marzo</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">165€</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">125€</td>
    </tr>
  </tbody>
  <tfoot>
    <tr class="border-t-2 border-b border-neutral-base">
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm uppercase" data-label="Mes de pago">Suma</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">325€</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">275€</td>
    </tr>
  </tfoot>
</table>
<!-- /table -->

Tabla con caption visible #

Este ejemplo con caption visible se considera tabla compleja a nivel de accesibilidad. Así que tendría que tener una descripción con un details asociado a la tabla con el atributo aria-describedby.

Caption 1: Meses y pagos
Mes de pago	Primer pago	Segundo pago
Enero	85€	95€
Febrero	75€	55€
Marzo	165€	125€

Mostrar código

Contenido

Nunjucks macro

{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
  "caption": "Caption 1: Meses y pagos",
  "captionClasses": "mb-base font-bold text-left text-lg",
  "firstCellIsHeader": true,
  "head": [
    {
      "text": "Mes de pago"
    },
    {
      "text": "Primer pago",
      "classes": "lg:text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "lg:text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "lg:text-right"
      },
      {
        "text": "55€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "lg:text-right"
      },
      {
        "text": "125€",
        "classes": "lg:text-right"
      }
    ]
  ]
}) }}

HTML

<!-- table -->
<table class="c-table">
  <caption class="mb-base font-bold text-left text-lg">Caption 1: Meses y pagos</caption>
  <thead class="sr-only lg:not-sr-only">
    <tr class="border-t border-b border-neutral-base">
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">Mes de pago</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:text-right">Primer pago</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:text-right">Segundo pago</th>
    </tr>
  </thead>
  <tbody>
    <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
      <th scope="row" class="block lg:table-cell before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm align-top px-base py-sm text-left font-normal text-sm text-neutral-dark" data-label="Mes de pago">Enero</th>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">85€</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">95€</td>
    </tr>
    <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
      <th scope="row" class="block lg:table-cell before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm align-top px-base py-sm text-left font-normal text-sm text-neutral-dark" data-label="Mes de pago">Febrero</th>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">75€</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">55€</td>
    </tr>
    <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
      <th scope="row" class="block lg:table-cell before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm align-top px-base py-sm text-left font-normal text-sm text-neutral-dark" data-label="Mes de pago">Marzo</th>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">165€</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">125€</td>
    </tr>
  </tbody>
</table>
<!-- /table -->

Tabla con wrapper #

Usa el parámetro wrapper para rodear la tabla con un <div> y poder añadir clases, normalmente para hacer scroll horizontal en la tabla en anchuras pequeñas. Por accesibilidad, parámetro wrapper necesitará los atributos: tabindex=0, role=section y un aria-label o aria-labelledby.

Caption 1: Meses y pagos
Mes de pago	Primer pago	Segundo pago	Rate for A	Rate for B	Rate for C	Rate for D	Rate for E	Rate for F	Rate for G	Rate for H
Enero	85€	95€	85€	95€	85€	95€	85€	95€	85€	95€
Febrero	75€	55€	85€	95€	85€	95€	85€	95€	85€	95€
Marzo	165€	125€	85€	95€	85€	95€	85€	95€	85€	95€

Mostrar código

Contenido

Nunjucks macro

{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
  "caption": "Caption 1: Meses y pagos",
  "captionClasses": "sticky left-0 top-0 w-0 mb-base font-bold text-left text-lg lg:whitespace-nowrap",
  "firstCellIsHeader": true,
  "head": [
    {
      "text": "Mes de pago",
      "classes": "lg:whitespace-nowrap"
    },
    {
      "text": "Primer pago",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for A",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for B",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for C",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for D",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for E",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for F",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for G",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for H",
      "classes": "lg:whitespace-nowrap lg:text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "lg:text-right"
      },
      {
        "text": "55€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "lg:text-right"
      },
      {
        "text": "125€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      }
    ]
  ],
  "wrapper": {
    "classes": "relative overflow-x-auto pb-base focus:outline-hidden focus:shadow-outline-black",
    "attributes": {
      "tabindex": "0",
      "role": "region",
      "aria-label": "Tabla con scroll del ejemplo Tabla con wrapper"
    }
  }
}) }}

HTML

<!-- table -->
<div class="relative overflow-x-auto pb-base focus:outline-hidden focus:shadow-outline-black" tabindex="0" role="region" aria-label="Tabla con scroll del ejemplo Tabla con wrapper">
  <table class="c-table">
    <caption class="sticky left-0 top-0 w-0 mb-base font-bold text-left text-lg lg:whitespace-nowrap">Caption 1: Meses y pagos</caption>
    <thead class="sr-only lg:not-sr-only">
      <tr class="border-t border-b border-neutral-base">
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap">Mes de pago</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Primer pago</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Segundo pago</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Rate for A</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Rate for B</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Rate for C</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Rate for D</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Rate for E</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Rate for F</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Rate for G</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Rate for H</th>
      </tr>
    </thead>
    <tbody>
      <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
        <th scope="row" class="block lg:table-cell before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm align-top px-base py-sm text-left font-normal text-sm text-neutral-dark" data-label="Mes de pago">Enero</th>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for A">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for B">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for C">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for D">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for E">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for F">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for G">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for H">95€</td>
      </tr>
      <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
        <th scope="row" class="block lg:table-cell before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm align-top px-base py-sm text-left font-normal text-sm text-neutral-dark" data-label="Mes de pago">Febrero</th>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">75€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">55€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for A">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for B">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for C">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for D">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for E">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for F">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for G">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for H">95€</td>
      </tr>
      <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
        <th scope="row" class="block lg:table-cell before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm align-top px-base py-sm text-left font-normal text-sm text-neutral-dark" data-label="Mes de pago">Marzo</th>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">165€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">125€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for A">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for B">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for C">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for D">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for E">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for F">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for G">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for H">95€</td>
      </tr>
    </tbody>
  </table>
</div>
<!-- /table -->

Tabla no responsive #

Usa la clase modificadora .c-table--no-responsive junto al parámetro wrapper para tablas que usen rowspan o colspan o tablas que no queremos que muestren sus celdas apiladas en móvil.

Caption 1: Meses y pagos
Mes de pago	Primer pago	Segundo pago
Enero	85€
Febrero	85€
Marzo	165€	125€

Mostrar código

Contenido

Nunjucks macro

{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
  "classes": "c-table--no-responsive w-full",
  "caption": "Caption 1: Meses y pagos",
  "captionClasses": "mb-base font-bold text-left text-lg",
  "firstCellIsHeader": true,
  "head": [
    {
      "text": "Mes de pago",
      "classes": "lg:whitespace-nowrap"
    },
    {
      "text": "Primer pago",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "lg:whitespace-nowrap lg:text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "text-center",
        "rowspan": 2,
        "colspan": 2
      }
    ],
    [
      {
        "text": "Febrero"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "lg:text-right"
      },
      {
        "text": "125€",
        "classes": "lg:text-right"
      }
    ]
  ],
  "wrapper": {
    "classes": "relative overflow-x-auto pb-base focus:outline-hidden focus:shadow-outline-black",
    "attributes": {
      "tabindex": "0",
      "role": "region",
      "aria-label": "Tabla con scroll  del ejemplo Tabla no responsive"
    }
  }
}) }}

HTML

<!-- table -->
<div class="relative overflow-x-auto pb-base focus:outline-hidden focus:shadow-outline-black" tabindex="0" role="region" aria-label="Tabla con scroll  del ejemplo Tabla no responsive">
  <table class="c-table c-table--no-responsive w-full">
    <caption class="mb-base font-bold text-left text-lg">Caption 1: Meses y pagos</caption>
    <thead class="sr-only lg:not-sr-only">
      <tr class="border-t border-b border-neutral-base">
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap">Mes de pago</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Primer pago</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Segundo pago</th>
      </tr>
    </thead>
    <tbody>
      <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
        <th scope="row" class="block lg:table-cell before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm align-top px-base py-sm text-left font-normal text-sm text-neutral-dark" data-label="Mes de pago">Enero</th>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm text-center" data-label="Primer pago" colspan="2" rowspan="2">85€</td>
      </tr>
      <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
        <th scope="row" class="block lg:table-cell before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm align-top px-base py-sm text-left font-normal text-sm text-neutral-dark" data-label="Mes de pago">Febrero</th>
      </tr>
      <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
        <th scope="row" class="block lg:table-cell before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm align-top px-base py-sm text-left font-normal text-sm text-neutral-dark" data-label="Mes de pago">Marzo</th>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">165€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">125€</td>
      </tr>
    </tbody>
  </table>
</div>
<!-- /table -->

Tabla con columnas sticky #

En este ejemplo la primera y última columna se mantienen fijas y el resto hacen scroll horizontal si la anchura es pequeña.

Caption 1: Meses y pagos
Mes de pago	Primer pago	Segundo pago	Rate for A	Rate for B	Rate for C	Rate for D	Rate for E	Rate for F	Rate for G	Rate for H
Enero	85€	95€	85€	95€	85€	95€	85€	95€	85€	95€
Febrero	75€	55€	85€	95€	85€	95€	85€	95€	85€	95€
Marzo	165€	125€	85€	95€	85€	95€	85€	95€	85€	95€

Mostrar código

Contenido

Nunjucks macro

{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
  "caption": "Caption 1: Meses y pagos",
  "captionClasses": "sticky top-0 left-0 w-0 mb-base font-bold text-left text-lg",
  "firstCellIsHeader": true,
  "head": [
    {
      "text": "Mes de pago",
      "classes": "lg:whitespace-nowrap sticky left-0 w-60 bg-white"
    },
    {
      "text": "Primer pago",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for A",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for B",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for C",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for D",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for E",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for F",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for G",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for H",
      "classes": "lg:whitespace-nowrap lg:text-right sticky right-0 w-60 bg-white"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero",
        "classes": "sticky left-0 w-60 bg-white"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right sticky right-0 w-60 bg-white"
      }
    ],
    [
      {
        "text": "Febrero",
        "classes": "sticky left-0 w-60 bg-white"
      },
      {
        "text": "75€",
        "classes": "lg:text-right"
      },
      {
        "text": "55€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right sticky right-0 w-60 bg-white"
      }
    ],
    [
      {
        "text": "Marzo",
        "classes": "sticky left-0 w-60 bg-white"
      },
      {
        "text": "165€",
        "classes": "lg:text-right"
      },
      {
        "text": "125€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right sticky right-0 w-60 bg-white"
      }
    ]
  ],
  "wrapper": {
    "classes": "overflow-x-auto pb-base focus:outline-hidden focus:shadow-outline-black",
    "attributes": {
      "tabindex": "0",
      "role": "region",
      "aria-label": "Tabla con scroll del ejemplo Tabla con columnas sticky"
    }
  },
  "classes": "relative lg:whitespace-nowrap"
}) }}

HTML

<!-- table -->
<div class="overflow-x-auto pb-base focus:outline-hidden focus:shadow-outline-black" tabindex="0" role="region" aria-label="Tabla con scroll del ejemplo Tabla con columnas sticky">
  <table class="c-table relative lg:whitespace-nowrap">
    <caption class="sticky top-0 left-0 w-0 mb-base font-bold text-left text-lg">Caption 1: Meses y pagos</caption>
    <thead class="sr-only lg:not-sr-only">
      <tr class="border-t border-b border-neutral-base">
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap sticky left-0 w-60 bg-white">Mes de pago</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Primer pago</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Segundo pago</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Rate for A</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Rate for B</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Rate for C</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Rate for D</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Rate for E</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Rate for F</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Rate for G</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right sticky right-0 w-60 bg-white">Rate for H</th>
      </tr>
    </thead>
    <tbody>
      <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
        <th scope="row" class="block lg:table-cell before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm align-top px-base py-sm text-left font-normal text-sm text-neutral-dark sticky left-0 w-60 bg-white" data-label="Mes de pago">Enero</th>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for A">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for B">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for C">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for D">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for E">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for F">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for G">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right sticky right-0 w-60 bg-white" data-label="Rate for H">95€</td>
      </tr>
      <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
        <th scope="row" class="block lg:table-cell before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm align-top px-base py-sm text-left font-normal text-sm text-neutral-dark sticky left-0 w-60 bg-white" data-label="Mes de pago">Febrero</th>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">75€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">55€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for A">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for B">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for C">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for D">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for E">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for F">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for G">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right sticky right-0 w-60 bg-white" data-label="Rate for H">95€</td>
      </tr>
      <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
        <th scope="row" class="block lg:table-cell before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm align-top px-base py-sm text-left font-normal text-sm text-neutral-dark sticky left-0 w-60 bg-white" data-label="Mes de pago">Marzo</th>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">165€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">125€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for A">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for B">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for C">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for D">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for E">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for F">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for G">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right sticky right-0 w-60 bg-white" data-label="Rate for H">95€</td>
      </tr>
    </tbody>
  </table>
</div>
<!-- /table -->

Componentes Índice de páginas

Tabla

Table

Tabla por defecto #

Contenido

Nunjucks macro

HTML

Tabla con tfoot #

Contenido

Nunjucks macro

HTML

Tabla con caption visible #

Contenido

Nunjucks macro

HTML

Tabla con wrapper #

Contenido

Nunjucks macro

HTML

Tabla no responsive #

Contenido

Nunjucks macro

HTML

Tabla con columnas sticky #

Contenido

Nunjucks macro

HTML