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