Question

我正在寻找像响应式表解决方案这样的引导程序，但没有完整的引导程序Javascript和CSS，因为我正在使用它的站点没有任何框架（从头开始）。演示：http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_table-responsive&stacked=h

使用CSS和简单的Javascript或jQuery插件创建这样的效果有什么简单的解决方案吗？我检查了不同的解决方案，但找不到这样一个只添加垂直滚动条的简单解决方案。

Answer 1

这就是你所需要的：

.yourTableClass {
  display: block;
  overflow-x: auto;
}

测试：

table {
  display: block;
  overflow-x: auto;
}


/* you don't need the rules below! */
table {
  margin: 0 1rem;
}
td {
  white-space: nowrap;
  padding: 3px 8px;
}

<table>
  <tr>
    <th> 1 </th>
    <th> 2 </th>
    <th> 3 </th>
    <th> 4 </th>
    <th> 5 </th>
    <th> 6 </th>
    <th> 7 </th>
    <th> 8 </th>
    <th> 9 </th>
    <th> 10 </th>
  </tr>
  <tr>
    <td> first column</td>
    <td> second column</td>
    <td> third column</td>
    <td> fourth column</td>
    <td> fifth column</td>
    <td> sixth column</td>
    <td> seventh column</td>
    <td> eighth column</td>
    <td> nineth column</td>
    <td> tenth column</td>
  </tr>
</table>

响应数据表水平滚动没有框架

1 个答案: