CODEWITHSUNDEEP
htmlcssresponsive-designhtml-table
SolemnWool
SolemnWool

Reputation: 35

Making table content responsive to screen size

I am making a table with pictures and text content (four rows, five columns) and am looking for the best way to make the content adapt to a screen without having to scroll from left to right to read it. So on a laptop it will show up as five columns, but on a mobile screen probably one or two.

I have seen suggestions of making a bunch of containers, divs etc and manually making them align on the page like a table. I am unsure how to do this to achieve the same effect as my current table. I'd be appreciative of any help and suggestions!

Upvotes: 3

Views: 4269

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206028

jsBin demo - Responsive Table (Without Bootstrap)

Instead of telling you "...just use Bootstrap" (155KB of stuff you'll barely use and understand, and losing valuable time searching for How-To's)...

here's a small school how to think responsively and actually understand the hell you're doing.

Think the Mobile-First way:

add to the header of your page:

<meta name="viewport" content="width=device-width, initial-scale=1">

Inside your CSS, write code like you style for extra small devices <768px(or higher) as default.
So that whatever you write as Default, it will apply to all other (bigger) sizes unless overwritten at some point inside a specific (higher) @media size and added up as a classname to the same element:

/* ::: XS (Extra small devices ad up) so: DEFAULT STYLES! */
/*here*/
/* ::: SM (Tablets and up) */
@media (min-width: 768px){ /*here*/ }
/* ::: MD (Desktop and up) */
@media (min-width: 992px) { /*here*/ }
/* ::: LG (Large desktop and up) */
@media (min-width: 1200px) { /*here*/ }

How the @media overwrite logic works while resizing? This simple example will tell you all:

XS +------------------->
SM     +--------------->    
MD          +---------->
LG               +----->


<div class=".hide-xs">You'll never see me :(</div><!-- Will be hidden on all sizes! -->
<div class=".hide-xs .show-md">:)</div><!-- hidden on mobile(xs) and tablet(sm) but visible on Desktop(md) and Large desktop(lg) -->

inside CSS you only need to define .hide-xs inside the XS (not inside SM) and .show-md inside MD (not in LG, cause as we said, even if you go to extra large, the class .show-md applies to the this-or-larger rule.)

Responsive table

Great let's see what you can do with your table:

  • Use DIV! (instead of table)
  • Design CSS as for mobile XS (keep all elements to block) as you would like to see them on mobile.
  • Hide "headings" for XS, making them visible for SM (larger will be applied consequently too, remember?)
  • For SM (or-higher) set your display: property of .table to table, to .row to table-row; and immediate children of .row > div to table-cell

Example:

/* ::: GLOBALS */
*{margin:0; box-sizing:border-box;}
html, body{height:100%;}
body{font:100%/1.3 sans-serif; color:#444; overflow-y:scroll;}


/* ::: XS (Extra small devices and up) so: DEFAULT STYLES! */
.hide-xs{
  position:absolute;
  visibility:hidden;
}
.table img{
  width:100%;
}


/* ::: SM (Tablets and up) */
@media (min-width: 768px){
  .show-xs{
    position:absolute;
    visibility:hidden;
  }
  .hide-xs{
    position:initial;
    visibility:visible;
  }
  .table{
    display:table;
    width:100%;
    table-layout:fixed;
    border-collapse:collapse;
  }
  .table .row{
    display:table-row;
  }
  .table .row > div{
    display:table-cell;
    vertical-align:middle;
  }
}

/* ::: MD (Desktop and up) */
@media (min-width: 992px) {}

/* ::: LG (Large desktop and up) */
@media (min-width: 1200px) {}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Responsive table example by Roko CB</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

  <div class="table">

    <div class="row hide-xs">
      <div>Image</div>
      <div>Color</div>
      <div>Sample</div>
      <div>Desc</div>
      <div>Price</div>
    </div>
    
    <!-- ROW -->
    <div class="row">
      <!-- CELLS -->
      <div><img src="//placehold.it/170x80/faf"></div>
      <div><span class="show-xs">Color:</span> #faf</div>
      <div><span class="show-xs">Sample:</span> 170x80px</div>
      <div><span class="show-xs">Desc:</span> Pinky</div>
      <div><span class="show-xs">Price:</span> 2.13</div>
    </div>
    
    <!-- OK, you got it -->
    <div class="row">
      <div><img src="//placehold.it/170x80/ffa"></div>
      <div><span class="show-xs">Color:</span> #ffa</div>
      <div><span class="show-xs">Sample:</span> 170x80px</div>
      <div><span class="show-xs">Desc:</span> Yelly</div>
      <div><span class="show-xs">Price:</span> 1.90</div>
    </div>
    
    <div class="row">
      <div><img src="//placehold.it/170x80/afa"></div>
      <div><span class="show-xs">Color:</span> #afa</div>
      <div><span class="show-xs">Sample:</span> 170x80px</div>
      <div><span class="show-xs">Desc:</span> Greeny</div>
      <div><span class="show-xs">Price:</span> 0.90</div>
    </div>
    
    <div class="row">
      <div><img src="//placehold.it/170x80/aaf"></div>
      <div><span class="show-xs">Color:</span> #aaf</div>
      <div><span class="show-xs">Sample:</span> 170x80px</div>
      <div><span class="show-xs">Desc:</span> Purply</div>
      <div><span class="show-xs">Price:</span> 1.00</div>
    </div>

  </div>
  
</body>
</html>

To recap, I didn't say Don't use Bootstrap, I'm just trying to say that it's empowering to know some best practices, know how CSS works, how Bootstrap works, and eventually decide what's best for your project.

Upvotes: 1

Related Questions