Таблица полной ширины в контейнере с прокруткой

Question

Таблица полной ширины в контейнере с прокруткой

0

Я собираюсь создать таблицу, которая будет выглядеть вот так:

Теперь это становится немного сложным, так как веб-сайт будет реагировать. Вот почему я подумал, что было бы неплохо обернуть таблицу в div .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 и так далее?

Andre Zimpel 22 окт. 2013, в 08:19

Источник

Теги:

html

css

table

1 ответ

Ещё вопросы

ColoO · Accepted Answer · 2013-10-23T13-04-00.000Z

Вы можете исправить свою проблему с помощью медиа-запроса.

Например:

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