Question

我打算在这里创建一个看起来像这样的表：

enter image description here

现在它变得棘手，因为该网站将具有响应性。这就是为什么我认为将表格包装在具有.cross-tab的div 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>

div应该具有overflow: scroll的特定宽度。因此，桌子在任何设备上都是全尺寸的，但是在小屏幕上被裁剪掉，滚动条会滚动到周围：

enter image description here

有没有办法用纯CSS实现这个目标，还是我必须用js来计算整个表格等等？

Answer 1

您可以使用媒体查询解决问题。

例如：

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

滚动容器中的全宽表

1 个答案: