Simple CSS trick to Make Table Responsive

| Drupal Development | 63 seen

CSS

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

 

Latest articles

LEGOLAND Berlin Review: A Fun Family Activity in the German Capital

When planning a family trip to Berlin with children, most travelers immediately think about the Berlin Zoo — and rightly so. But if you are spending a few days in the German capital with younger kids, another solid half-day activity is the LEGOLAND Discovery Centre BerlinWe visited it in April 2026 together with our 7-year-old daughter during our…

Germany |

Ādģēri: The 30K Mistake That Turned Into a Long-Term Experiment

In 2023, we bought Ādģēri in an online auction.Price: just over €30,000.Financing: ~6% interest.Total expected payment over ~5 years: ~€40,000.Status (April 2026): more than half already paid.On paper, it was a bad deal.Realistically, we overpaid by at least 5–6× relative to what the property was objectively worth at the time. No serious buyer…

Ādģēri |