Full width table in a scrollingcontainer
Question
I'm about to create a table which is going to look like this one right 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:
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 answers
solution1
0 ACCPTED 2013-10-23 14:39:36
You can fix your problem with media query.
For example :
HTML
<body>
<div>
<table border="1" cellspacing="2" cellpadding="0">
<tr> <td> </td> </tr> <tr> <td> </td> </tr>
<tr> <td> </td> </tr> <tr> <td> </td> </tr>
<tr> <td> </td> </tr> <tr> <td> </td> </tr>
<tr> <td> </td> </tr> <tr> <td> </td> </tr>
<tr> <td> </td> </tr> <tr> <td> </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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.