具有许多列的HTML表的设计

概述最近,我遇到了 HTML表设计问题的麻烦. 我有一个CS程序,我想将它重建为一个BS程序.这是UI屏幕截图. 如你所见,它有太多列.将出现水平滚动条.如何改善用户体验？ 我试图将几个列组合成一个,但它带来了一些新问题 – 混乱,不好过滤和排序. 如果你有一个很好的例子,请告诉我. 经过长时间的思考,并不完美,但我找到了一些解决方法.我在这里发布我的解决方案以供参考 1,允许水平滚动条过长的列. 这 最近,我遇到了 HTML表设计问题的麻烦.
我有一个CS程序,我想将它重建为一个BS程序.这是UI屏幕截图.

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

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

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

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

1,允许水平滚动条过长的列.

这可以通过添加包装表的div标记轻松完成,如下所示：

<div >    <table >    <!-- stuff -->    <!-- no-wrap is a adminLTE style which makes the text in the table do not wrap -->    </table></div>

2,允许用户控制显示哪些列.我通过添加基于bootstrap的模态对话框来完成此 *** 作.

在减少显示列数时,您会发现它在窄屏幕中看起来更好.

通过编写一些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,允许用户控制列的顺序.它类似于控制列的显示状态.

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

总结

以上是内存溢出为你收集整理的具有许多列的HTML表的设计全部内容，希望文章能够帮你解决具有许多列的HTML表的设计所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。