滚动容器中的全宽表
[英]Full width table in a scrollingcontainer
问题描述
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 . 这就是为什么我认为将表包装在.cross-tab会很不错的原因，它具有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 . div应该具有一定的overflow: scroll宽度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? 有没有一种方法可以使用纯CSS完成此操作，还是必须使用js等来计算完整表？
1 个解决方案
解决方案1
0 已采纳 2013-10-23 14:39:36
You can fix your problem with media query. 您可以通过媒体查询解决您的问题。
For example : 例如 ：
HTML 的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 的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 codepen： http ：//codepen.io/ColoO/pen/xuACl
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.