Double Zebra Responsive Tables

No-frills, CSS-only default for creating responsive tables that work everywhere.

Need to make your tables play nice on small screens?

Try this CSS:

table {
    display: block;
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}
tr:nth-child(odd) {
    background-color: palegreen;
}
tr:first-child {
    background-color: lightblue;
}
th:nth-child(odd),
td:nth-child(odd) {
    background-color: rgba(0,0,0,.05);
}
        

It's not fancy but it works great as a simple default.

Demo:

header 01 header 02 header 03 header 04 header 05 header 06 header 07 header 08 header 09 header 10 header 11 header 12 header 13 header 14 header 15 header 16 header 17 header 18 header 19 header 20
row 01 col 01 row 01 col 02 row 01 col 03 row 01 col 04 row 01 col 05 row 01 col 06 row 01 col 07 row 01 col 08 row 01 col 09 row 01 col 10 row 01 col 11 row 01 col 12 row 01 col 13 row 01 col 14 row 01 col 15 row 01 col 16 row 01 col 17 row 01 col 18 row 01 col 19 row 01 col 20
row 02 col 01 row 02 col 02 row 02 col 03 row 02 col 04 row 02 col 05 row 02 col 06 row 02 col 07 row 02 col 08 row 02 col 09 row 02 col 10 row 02 col 11 row 02 col 12 row 02 col 13 row 02 col 14 row 02 col 15 row 02 col 16 row 02 col 17 row 02 col 18 row 02 col 19 row 02 col 20
row 03 col 01 row 03 col 02 row 03 col 03 row 03 col 04 row 03 col 05 row 03 col 06 row 03 col 07 row 03 col 08 row 03 col 09 row 03 col 10 row 03 col 11 row 03 col 12 row 03 col 13 row 03 col 14 row 03 col 15 row 03 col 16 row 03 col 17 row 03 col 18 row 03 col 19 row 03 col 20
row 04 col 01 row 04 col 02 row 04 col 03 row 04 col 04 row 04 col 05 row 04 col 06 row 04 col 07 row 04 col 08 row 04 col 09 row 04 col 10 row 04 col 11 row 04 col 12 row 04 col 13 row 04 col 14 row 04 col 15 row 04 col 16 row 04 col 17 row 04 col 18 row 04 col 19 row 04 col 20
row 05 col 01 row 05 col 02 row 05 col 03 row 05 col 04 row 05 col 05 row 05 col 06 row 05 col 07 row 05 col 08 row 05 col 09 row 05 col 10 row 05 col 11 row 05 col 12 row 05 col 13 row 05 col 14 row 05 col 15 row 05 col 16 row 05 col 17 row 05 col 18 row 05 col 19 row 05 col 20
row 06 col 01 row 06 col 02 row 06 col 03 row 06 col 04 row 06 col 05 row 06 col 06 row 06 col 07 row 06 col 08 row 06 col 09 row 06 col 10 row 06 col 11 row 06 col 12 row 06 col 13 row 06 col 14 row 06 col 15 row 06 col 16 row 06 col 17 row 06 col 18 row 06 col 19 row 06 col 20
row 07 col 01 row 07 col 02 row 07 col 03 row 07 col 04 row 07 col 05 row 07 col 06 row 07 col 07 row 07 col 08 row 07 col 09 row 07 col 10 row 07 col 11 row 07 col 12 row 07 col 13 row 07 col 14 row 07 col 15 row 07 col 16 row 07 col 17 row 07 col 18 row 07 col 19 row 07 col 20
row 08 col 01 row 08 col 02 row 08 col 03 row 08 col 04 row 08 col 05 row 08 col 06 row 08 col 07 row 08 col 08 row 08 col 09 row 08 col 10 row 08 col 11 row 08 col 12 row 08 col 13 row 08 col 14 row 08 col 15 row 08 col 16 row 08 col 17 row 08 col 18 row 08 col 19 row 08 col 20
row 09 col 01 row 09 col 02 row 09 col 03 row 09 col 04 row 09 col 05 row 09 col 06 row 09 col 07 row 09 col 08 row 09 col 09 row 09 col 10 row 09 col 11 row 09 col 12 row 09 col 13 row 09 col 14 row 09 col 15 row 09 col 16 row 09 col 17 row 09 col 18 row 09 col 19 row 09 col 20
row 10 col 01 row 10 col 02 row 10 col 03 row 10 col 04 row 10 col 05 row 10 col 06 row 10 col 07 row 10 col 08 row 10 col 09 row 10 col 10 row 10 col 11 row 10 col 12 row 10 col 13 row 10 col 14 row 10 col 15 row 10 col 16 row 10 col 17 row 10 col 18 row 10 col 19 row 10 col 20