Question

我尝试用它来创建一个可滚动的表，用于响应式设计。但不行。如果这不可能，我该怎么做？

@media screen and (max-width: 640px) {
table {
    overflow-x: auto;
    display: inline-block;
}
}

HTML代码：

<table>
    <tr class="col">
          <td id="col-1">
               Servidor
          </td>
          <td id="col-2">
               Calidad
          </td>
          <td id="col-3">
               Idioma
          </td>
          <td id="col-4">
               Enlace
          </td>
     </tr>
</table>

CSS代码：

#movie-links #links-info tr {margin: 0;}
#movie-links #links-info .col {background: #F1F1F1; border-bottom: 1px solid #CACACA; float: left; color: gray; padding: 10px;}
#movie-links #links-info .col td {margin: 0;}
#movie-links #links-info #col-1 {width: 150px;}
#movie-links #links-info #col-2 {width: 200px;}
#movie-links #links-info #col-3 {width: 150px;}
#movie-links #links-info #col-4 {width: 300px;}

Answer 1

如果你需要水平滚动使用overflow-x：scroll 如果垂直使用溢出-y：滚动

如何创建响应式可滚动表？

1 个答案: