0

I'm about to create a table which is going to look like this one right here:

enter image description here

Now it's getting tricky since the website is going to be responsive. That's why I thought it would be nice to wrap the table in a div .cross-tab which has overflow: scroll.

<div class="bs-example">
  <div class="cross-tab">
    <table>
      <thead>
        <tr>
          <? for ($i=0; $i < 19; $i++) { ?>

            <th>
              <img src="http://placehold.it/40x40" class="team-icon">
            </th>

          <? } ?>
        </tr>
      </thead>
      <tbody>
        <tr></tr>
      </tbody>
    </table>
  </div>
</div>

The div should have a certain width the overflow: scroll. So the table would be full-sized on any device but get cropped off on small screens with a scrollbar to scroll arround:

enter image description here

Is there a way to accomplish this with pure CSS or do I have to calculate the full table with with js and so on?

1 Answer 1

0

You can fix your problem with media query.

For example :

HTML

<body>

<div>
  <table  border="1" cellspacing="2" cellpadding="0"> 
    <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> 
    <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> 
    <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> 
    <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> 
    <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> 
  </table>
</div>

</body>

CSS

div 
{
  background : red;
  width:100%;
  overflow:auto;  
}

table 
{
  width :100%;
  overflow:hidden;
}

@media screen and (max-width: 640px) 
{
  table 
  {
    width : 800px;    
  }
  div 
  {
    height:200px;
  }
}

codepen : http://codepen.io/ColoO/pen/xuACl

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.