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

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 垂直使用 overflow-y:scroll