Make readable table headers with CSS

Screenshot showing the bare minimum you can achieve by making your tables responsive
Screenshot showing how you can leverage CSS to make your table’s column headers appear side-by-side
Screenshot showing how you can combine the previous example with pseudo-elements to create more readable headers (not necassarily accessible)
/* Use flexbox to remove the headers from their columns */
table thead tr,
table tbody:first-child tr:first-child {
display: flex;
text-align: left;
}
/* Remove the right border from all but the last cell */
table thead tr th:not(:last-child),
table tr:first-child th:not(:last-child) {
border-right: 0;
}
/* Let the last cell take up all of the available space, bringing all the content next to each other */
table thead tr th:last-child,
table tr:first-child th:last-child {
flex: 1;
}
/* Remove any LEFT padding from all except the first cell */
table thead tr th:not(:first-child),
table tr:first-child th:not(:first-child) {
padding-left: 0;
}
/* Remove any RIGHT padding from all except the last cell */
table thead tr th:not(:last-child),
table tr:first-child th:not(:last-child) {
padding-right: 0;
}
/* Add a comma and a space before to all but the first cell */
table thead tr th:not(:first-child):before,
table tr:first-child th:not(:first-child):before {
content: ',\00a0';
}
/* Add ' & ' before the last cell */
table thead tr th:last-child:before,
table tr:first-child th:last-child:before {
content: '\00a0\0026\00a0';
}

--

--

--

Head of Development. I like fast & responsive websites. 🤙

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Hey https://t.co/gMF2CDPR8H thanks for the follow!

How to deploy Django and Vue using Nginx

Why Side Projects are Important to Developers

What is: chroot — the system call and utility in Linux

The State and Future of Shopify Frontend/Theme Development

Go vs C#, part 1: Goroutines vs Async-Await

Raise your hand if you want to quit drinking coffee. Why, though???

What Makes Mobile Learning (mLearning) Different From eLearning?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Charanjit Chana

Charanjit Chana

Head of Development. I like fast & responsive websites. 🤙

More from Medium

💕 7 Romantic VS Code Themes for the perfect Valentine’s Day

NOTHING HAPPENS UNTIL YOU GIVE IT A TRY

Calculator

Vuetify use CSS Grid classes