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:

1) Best PHP Frameworks (2019)

2) InnoDB vs MyISAM | Storage Engines | Tabular Differences