Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
tables

21 Articles
{
,

}
Direct link to the article Faking Min Width on a Table Column
col table-layout tables

Faking Min Width on a Table Column

The good ol’ <table> tag is the most semantic HTML for showing tabular data. But I find it very hard to control how the table is presented, particularly column widths in a dynamic environment where you might not know how …

Avatar of Anders Pedersen
Anders Pedersen on Jan 10, 2023
Direct link to the article TablesNG — Improvements to table rendering in Chromium
tables

TablesNG — Improvements to table rendering in Chromium

When I blogged “Making Tables With Sticky Header and Footers Got a Bit Easier” recently, I mentioned that the “stickiness” improvement was just one of the features that got better for <table>s in Chrome as part of the TablesNG upgrade…

Avatar of Chris Coyier
Chris Coyier on Jun 23, 2021
Direct link to the article A table with both a sticky header and a sticky first column
sticky tables

A table with both a sticky header and a sticky first column

We’ve covered that individual <table> cells, <th> and <td> can be position: sticky. It’s pretty easy to make the header of a table stick to the top of the screen while scrolling through a bunch or rows (like this …

Avatar of Chris Coyier
Chris Coyier on Feb 9, 2021
Direct link to the article In Defense of Tables and Floats in Modern Day Development
float table-layout tables

In Defense of Tables and Floats in Modern Day Development

Twenty-plus years ago, tables were the main way web pages were created in HTML. It gave web builders consistent control of constructing pages with some “design.” No longer did sites only have to be top-to-bottom in a linear manner — …

Avatar of John Macpherson
John Macpherson on Oct 30, 2020
Direct link to the article Rotated Table Column Headers… Now With Fewer Magic Numbers!
tables

Rotated Table Column Headers… Now With Fewer Magic Numbers!

Rotated <table> column headers is something that’s been covered before right here on CSS-Tricks, so shout-out to that for getting me started and helping me achieve this effect. As the article points out, if you aren’t using trigonometry to calculate …

Avatar of Cappie Pomeroy
Cappie Pomeroy on Jun 1, 2020
Direct link to the article Making Tables Responsive With Minimal CSS
responsive tables

Making Tables Responsive With Minimal CSS

Here’s a fabulous CSS trick from Bradley Taunt in which he shows how to make tables work on mobile with just a little bit of extra code. He styles each table row into a card that looks something like this:…

Avatar of Robin Rendle
Robin Rendle on Oct 17, 2019
Direct link to the article Table with Expando Rows
accessibility tables

Table with Expando Rows

“Expando Rows” is a concept where multiple related rows in a <table></table> are collapsed until you open them. You’d call that “progressive disclosure” in interaction design parlance.

After all these years on CSS-Tricks, I have a little better eye for …

Avatar of Chris Coyier
Chris Coyier on Sep 20, 2019
Direct link to the article Position Sticky and Table Headers
sticky tables

Position Sticky and Table Headers

You can’t position: sticky; a <thead></thead>. Nor a <tr></tr>. But you can sticky a <th></th>, which means you can make sticky headers inside a regular ol’ <table></table>. This is tricky stuff, because if you didn’t know …

Avatar of Chris Coyier
Chris Coyier on Jul 12, 2019 (Updated on Mar 5, 2020)
Direct link to the article Table design patterns on the web
tables

Table design patterns on the web

Chen Hui Jing has tackled a ton of design patterns for tables that might come in handy when creating tables that are easy to read and responsive for the web:

There are a myriad of table design patterns out there,

…
Avatar of Robin Rendle
Robin Rendle on Jan 28, 2019
Direct link to the article An Idea for a Simple Responsive Spreadsheet
responsive tables tables

An Idea for a Simple Responsive Spreadsheet

How do you make a spreadsheet-like interface responsive without the use of any JavaScript? This is the question I’ve been asking myself all week as I’ve been working on a new project and trying to figure out how to make …

Avatar of Robin Rendle
Robin Rendle on Nov 28, 2017
Direct link to the article Designing Tables to be Read, Not Looked At
tables

Designing Tables to be Read, Not Looked At

Richard Rutter, in support of his new book Web Typography, shares loads of great advice on data table design. Here’s a good one:

You might consider making all the columns an even width. This too does nothing for the

…
Avatar of Chris Coyier
Chris Coyier on Nov 7, 2017
  • 1
  • 2
  • Older

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top