我正在开发一个有很多表格的应用程序。其中一些表格水平很长,因此如果它们超出页面范围,我想为它们添加水平滚动。
我在谷歌上搜索了解决方法,它们都指向在表格上使用
看起来我要么可以让列较少的表格好看,让列很多的表格超出页面,要么让列较少的表格看起来不好,让列很多的表格漂亮且响应灵敏。但似乎没有同时解决两个问题的方法。
这些表格是由用户生成的,所以我不能手动为每个表格设置CSS。
那么有没有一种方法可以将
更新:
JS fiddles:
带有"display: block; overflow-x: auto"的 不带有"display: block; overflow-x: auto"的 抱歉,CSS在HTML中,但用户将使用所见即所得编辑器制作表格,因此这就是应用程序的方式。
我在谷歌上搜索了解决方法,它们都指向在表格上使用
display: block; overflow-x: auto;
。这适用于比屏幕更宽的表格,但现在由于表格设置为display:block;
而不是默认的display: table;
,表格单元格都被挤在一起,表格没有保持其自然的100%宽度,这使得那些不比屏幕更宽的表格看起来非常糟糕,被挤压在页面左侧。看起来我要么可以让列较少的表格好看,让列很多的表格超出页面,要么让列较少的表格看起来不好,让列很多的表格漂亮且响应灵敏。但似乎没有同时解决两个问题的方法。
这些表格是由用户生成的,所以我不能手动为每个表格设置CSS。
那么有没有一种方法可以将
display: table
保留在表格上,使其像表格一样运行,并在其宽度超过页面时水平滚动呢?更新:
JS fiddles:
带有"display: block; overflow-x: auto"的 不带有"display: block; overflow-x: auto"的 抱歉,CSS在HTML中,但用户将使用所见即所得编辑器制作表格,因此这就是应用程序的方式。