No-frills, CSS-only default for creating responsive tables that work everywhere.
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.
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 |