0

我即将创建一个看起来像这样的表：

在此处输入图像描述

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

div 应该有一定的宽度overflow: scroll。所以表格在任何设备上都是全尺寸的，但在带有滚动条的小屏幕上会被裁剪掉：

在此处输入图像描述

有没有办法用纯 CSS 来完成这个，还是我必须用 js 等来计算完整的表格？

4

1 回答 1

0

您可以通过媒体查询解决您的问题。

例如 ：

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;
  }
}

代码笔： http ://codepen.io/ColoO/pen/xuACl

于 2013-10-23T14:39:36.110 回答