Can I color table columns using CSS without coloring individual cells?

html

responsive-design

css

table-design

byAlex Kataev·Jan 31, 2025

Surely, color table columns using <colgroup> and <col> in HTML amalgamated with :nth-child in CSS.

/* The first column is yellow, like sun-created landscape */
col:nth-child(1) {
  background-color: yellow;
}

/* The second column is blue, like daunting ocean */
col:nth-child(2) {
  background-color: blue;
}

<table>
  <colgroup>
    <!-- add as many <col> as required-->
    <col><col>
  </colgroup>
  <!-- Rest of the table goes here -->
</table>

This strategy assigns identical color to each cell in the column, evading individual cell styling.

Mastery using colgroup and col

<colgroup> and <col> elements offer class application and leveraging the span attribute for enhanced control and flexibility of table design.

Deploying class selectors

For theme-oriented column coloring, assign classes to <col>.

<table>
  <colgroup>
    <!-- Themed classes for columns -->
    <col class="sunny"><col class="ocean">
  </colgroup>
  <!-- Table data -->
</table>

/* Like sunny day or deep ocean */
.sunny { background-color: #FFDA00; }
.ocean { background-color: #0077BE; }

Span for grouping columns

The span attribute allows styling over multiple consecutive columns.

<colgroup>
  <!-- Two columns, one style -->
  <col span="2" class="group-style">
</colgroup>

Complex table handling with colgroup

Multipart table layouts take advantage from <colgroup> for distinct segment styling while keeping markup clean and simple.

<table>
  <colgroup class="first-pair">
    <!-- Styling two column pairs individually -->
    <col class="aqua"><col class="coral">
  </colgroup>
  <colgroup class="second-pair">
    <col class="mint"><col class="peach">
  </colgroup>
  <!-- Table data -->
</table>

Ultimate coloring with nth-child selector

:nth-child is the prime choice for applying color to specific columns, high-performance and dynamic.

Syntax and function

/* Odd columns get a taste of nature's green */
col:nth-child(odd) {
  background-color: green;
}

/* Every third column from top, they say it's cold up there */
col:nth-child(3n+1) {
  background-color: navy;
}

Heading and cell combination

For consistent styling over both headers and cells for a column, combine the :nth-child.

/* Refreshing light blue for the second column */
th:nth-child(2), td:nth-child(2) {
  background-color: lightblue;
}

Transparency using rgba

Leverage rgba for transparent column coloring to keep text legible.

/* Fourth column, with a hint of fire in the air */
col:nth-child(4) {
  background-color: rgba(255, 0, 0, 0.2);
}

Responsive design matters

Especially in times of responsive layouts, mobile adaptation is pivotal for table columns.

Media queries

Use media queries to adjust column colors based on viewport.

@media (max-width: 768px) {
  /* A color change for the first column, when screen is small */
  col:nth-child(1) { background-color: plum; }
}

For collapsible tables

Think flexible when tables change structure on smaller screens to stay visually consistent.

Say hello to CSS custom properties

CSS custom properties make it easy to manage color themes:

:root {
  /* Define your master color here */
  --primary-color: #ff4500;
}

col:nth-child(1) {
  /* Apply your master color */
  background-color: var(--primary-color);
}

Toronto browser compatibility situation

:nth-child and <col> styling might land you in unsupported territory for certain browsers. Stay ahead with these tips and resources.

Fallback appreciation

Offer a decent default color for users with lesser CSS support:

/* Good-old silver for the rescue */
col { background-color: #c0c0c0; }

Feature savior @supports

Detect CSS feature support and fire up styles accordingly:

@supports (background-color: rgba(0, 0, 0, 0.5)) {
  /* Green go for transparent-supporting browsers */
  col:nth-child(2) { background-color: rgba(0, 128, 0, 0.3); }
}