html中table如何实现手机端左右滚动查看表格数据

如何实现手机端表格宽度不够时，自动实现可手动左右滑动查看表格内容？

自定义css文件：

@media (max-width: 600px) {
    table {
      display: block;
      margin: 0 auto;
      overflow-x: auto;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
}

这里的@media(max-width: 600px)表示，程序自动判断显示屏幕的宽度，如果小于600px则table的css格式生效，
overflow-x: auto;即代表x轴横向滑动展示。

如果你也使用了bootstrap css，那么自定义css文件必须在bootstrap.css文件之后进行加载，如下：

1 2	<link rel="stylesheet" href={{ url_for('static', filename='css/bootstrap.min.css')}}> <link rel="stylesheet" href={{ url_for('static', filename='css/style-index.css') }}>

记录一下，一起学习。