Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
ce.help

Create a responsive div table

Question

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!

Edited by team_awesome
Initial Revision

Share this post


Link to post

7 answers to this question

Recommended Posts

  • 2

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


If this or any other answer helps you out, please give credit where credit is due and Accept and/or Up-Vote that answer. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.


If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 0

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

Edited by alxfyv
add comment re visual display

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Share this post


Link to post
  • 0

@BrandonW:

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

-Steve


I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Share this post


Link to post
  • 0

@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%;
    }


Share this post


Link to post
  • 0

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


If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 0

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

-Brandon


If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...