具有许多列的HTML表的设计

2023年11月8日 215次阅读

最近,我遇到了
HTML表设计问题的麻烦.

我有一个CS程序,我想将它重建为一个BS程序.这是UI屏幕截图.

如你所见,它有太多列.将出现水平滚动条.如何改善用户体验？

我试图将几个列组合成一个,但它带来了一些新问题 – 混乱,不好过滤和排序.

如果你有一个很好的例子,请告诉我.

最佳答案 经过长时间的思考,并不完美,但我找到了一些解决方法.我在这里发布我的解决方案以供参考

1,允许水平滚动条过长的列.
《具有许多列的HTML表的设计》
这可以通过添加包装表的DIV标记轻松完成,如下所示：

<div style="overflow-x: auto;">
    <table class="no-wrap">
    <!-- stuff -->
    <!-- no-wrap is a AdminLTE style which makes the text in the table do not wrap -->
    </table>
</div>

2,允许用户控制显示哪些列.我通过添加基于Bootstrap的模态对话框来完成此操作.
《具有许多列的HTML表的设计》
在减少显示列数时,您会发现它在窄屏幕中看起来更好.

通过编写一些JavaScript代码并使其在您的项目中很常见,这并不难.请记住充分利用本地存储技术在本地保存用户配置,并在用户下次打开此页面时恢复状态.在我的解决方案中,我的本地存储密钥是这样的：

my-datatable-hide-col:/business/order:tb-order

my-datatable-hide-col是固定的,/ business / order是路径,而tb-order是表的id.此Local Storage键的值如下所示：

[0, 3, 4]

这意味着将隐藏第0列,第3列和第4列.如果该值不存在或为空,则不会隐藏任何列.

3,允许用户控制列的顺序.它类似于控制列的显示状态.
《具有许多列的HTML表的设计》

这也可以通过编写一些JavaScript代码并使其通用来完成.

点赞