Create a responsive div table

I would like to create a responsive div table on my website. Here is the code I'm currently using:

<style type="text/css">
  .table {
  display: table;
  background-color: #fb782d;
  }
  .row {
  display: table-row;
    width: 100%;
  }
  .column {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 20px;
  width: 20%;
  border-right: 1px solid white;
  }
 .row a {
    color: #fff !important;
 }
  .row a:hover {
  color: #363636 !important;
  }
</style>
<div class="table"style="width:100%">
  <div class="row">
     <div class="column"><a href="#pharma">Pharmaceuticals</a></div>
     <div class="column"><a href="#med">Medical Devices & Diagnostics</a></div>
     <div class="column"><a href="#health">Consumer Health & Over-the-counter (OTC)</a></div>
    <div class="column"><a href="#logistics">Pharma Asia-Hub Logistics</a></div>
     <div class="column"><a href="#sol">Specialised Solutions</a></div>
  </div>
</div>

Does anyone have any advise? Thanks!

A few comments:

• I would change your class "column" to "cell", since that's more accurate. No biggy though.

• The quest for "responsive tables" is an ambitious one. On mobile, you can only fit a few cells wide and only if the text isn't too long. Here are some solutions that others have come up with to deal with it.

I suppose the simplest thing to do would be to add a media query and break the cells into stacking blocks. Like this.

@media only screen and (max-width: 860px) {
       .column {
           display: block;
           width: 100%;
           border-bottom: 1px solid white;
       }
   }

Do let me know if this works for you.

-Brandon

I needed a responsive table (/test-table) on my site but could not have it break columns at mobile sizes, but rather display with horizontal scrolling. I put a

<div>

wrapper around the table and at the mobile breakpoint set the overflow-x: auto; property on the wrapper. Other properties are set to accommodate touch scrolling.

If you care to, you can see the code at the pen Table Play on CodePen. It has only some data entered. It's only for development as the real data won't be available for some time. To see the code display in a visually formatted way, just copy it and paste it into a plain text processor. (I use BBEdit (Mac)). Ignore the JavaScript. It's there to dynamically populate the table with data and handle the modal dialog. It has nothing to do with the table structure or how the table displays.

If you have any questions or need something further that I might provide, just mention me in a comment by username.

I hope this is of some help.

-Steve

@BrandonW:

That's an excellent article on responsive tables. Thanks so much for finding and including it. :-)

-Steve

@BrandonW: Thanks for your reply! I did use a similar approach and here's the code that worked:

  @media screen and (min-width: 30em) {
     .column {
      display: table-cell;
      width: 33%;
      border-right: 1px solid white;
    }
   @media screen and (min-width: 20em) and (max-width: 30em) {
    .column {
      display:table-row;
      width: 100%;
    }

That's true. When I said "...the simplest thing to do..." I suppose I neglected to consider simply making the table horizontally scrollable. Obviously this has its own disadvantages (as all approaches do) but it does get the job done!

-Brandon

Nice! Yeah that'll work too; thanks for letting me know.

-Brandon

When it comes to embedding a table in a website, automatic update can be a challenge. I'd like to propose an alternative tool called RowShare, that allows an automatic update. I explained about this in an article that I wrote. Please feel free to take a look at it: https://www.rowshare.com/blog/en/2017/10/10/How-to-Embed-Tables-in-Your-WebsiteThanks,Asta