I, being a hardcore backend developer knows very little about CSS things and hence, when I came across a challenge (Yes, for backend devs, these things are a challenge xD) where I need to show some tabular data over my blog, I was literally trying so many things out there on internet and finally came up with my own(almost :P) CSS solution.
Here, I am presenting My solution for responsive tables and urging all CSS Geeks out there to comment/suggest better solutions.
So here is my solution:
.data_table_custom { display: block; overflow-x: auto; border-collapse: collapse; border-spacing: 0; width: 100%; margin-bottom: 1em; border: none; line-height: 2; } .data_table_custom tbody { border: 3px solid yellow; } .data_table_custom td { padding: 8px; border: none; text-align: left; } .first_block { background-color: #00FFFF; } .data_table_custom td{ word-wrap: break-word; width: 16%; } .data_table_custom .odd{ background-color: #dfdfdf; }
Notes:
1) data_table_custom -> Table class
2) first_block -> for header
Some of the blog posts where I have used this:
Top comments (0)