Zebra striping

Zebra striping gives alternate rows of a table different background colors, so the eye can follow one row across a wide table. Drupal does not apply a stripe pattern on its own. In Drupal 11 whether a table is striped depends on the theme: its template, its CSS, or both.

How striping works in Drupal 11

Drupal builds a table from a render array with #header and #rows. Each row can carry a no_striping flag, and table preprocessing adds a data-striping attribute to the table unless the flag is set.

The classes themselves come from the template:

• The base table.html.twig in the System module prints each row with its own attributes and adds no odd or even class.
• The table template that Claro keeps for templates it once inherited from Classy cycles odd and even classes over the rows, unless no_striping is set. Default Admin has the same.
• Olivero has no table template of its own, so it uses the base one. Drupal.org issue 3332049 reports that Olivero has no table striping. On 2 October 2026 it moved from the core queue to the Olivero project, and on 2026-10-26 its status was Active.

Having the classes does not mean you see stripes. In Drupal 11.4.10, Claro's tables.css gives every row a white background, a bottom border and a highlight on hover. No rule there stripes ordinary tables. The only Claro rules that name the classes style the Extend page and the translation status form, and they give both classes the same look.

Example

To stripe the Views tables of your theme, add one rule to its stylesheet. Olivero's Views table template adds the views-table class; core's own Views table template does not, so check the class your theme prints.

.views-table tbody tr:nth-child(even) {
          background-color: #f4f4f4;
        }
        

MDN describes even as the rows in positions 2, 4, 6 and so on. The rule needs no change to the template.

Common mistakes

• Counting hidden rows. :nth-child() counts a row even when it is hidden, so the visible rows can stop alternating. MDN's fix is the of syntax: tr:nth-child(even of :not([hidden])).
• Styling classes your template never prints. A rule for tr.odd does nothing when the table template adds no such class. Check the markup in the browser first.
• Weak contrast. A stripe color that is too close to the text color or the page makes the table harder to read, not easier. Check the contrast of text on both row colors.

For marketing and content teams

If a data table on your site is hard to read, ask your front-end developer for striping or more row spacing. It is a theme change that does not touch your content.

Sources

• Drupal core 11.4.10: ThemePreprocess.php (table preprocess)
• table.html.twig, Drupal API
• Drupal core 11.4.10: Claro tables.css
• Drupal core 11.4.10: Claro modules-page.css
• Drupal core 11.4.10: Claro table template (Classy copy)
• Drupal core 11.4.11: Standard profile system.theme.yml
• Drupal core 11.4.10: tabledrag.js
• Drupal.org issue 3332049: no table zebra CSS classes (Olivero), checked 2026-10-26
• MDN: :nth-child()