Simple CSS trick to Make Table Responsive

Updated: 11 June, 2020 seen 619
CSS Drupal Development

Working on the OptionsBrew.com project (website is powered by Drupal 8) I faced the following responsive table issue while browsing content with a table on smaller screens (phone)

Broken Table on smaller screens

Broken Table on a smaller screen

Luckily there is a simple CSS workaround:

in the .css file add the following to table properties:

   display: block;
   overflow-x: auto;

like this:

table{
    border-collapse: separate;
    border-spacing: 0;
    width:100%;
    margin: 25px 0 40px;
    display: block;
    overflow-x: auto;
}

here is how it looks now

Responsive table

Responsive table

You can see a live example here: Top 20 Most Active Stock Options May 2020

about

Hi! My name is Reinis Fischer (38). Dad, husband, options trader, dividend income investor, crypto hedge fund manager, drone enthusiast, world traveler, photographer, and passionate lover of Georgian cuisine (vegetarian). 

If you're looking to diversify your investment portfolio and explore the exciting world of cryptocurrency, be sure to check out my crypto hedge fund for opportunities that align with your financial goals