多列HTML表格的设计答案

【问题标题】：Design of HTML table with many columns多列HTML表格的设计
【发布时间】：2020-11-26 00:00:00
【问题描述】：

最近，我遇到了一个 HTML 表格设计问题。我有一个 CS 程序，我想把它重建成一个 BS 程序。这是 UI 屏幕截图。

如您所见，它的列太多。将出现一个水平滚动条。如何改善用户体验？

我尝试将几列合二为一，但带来了一些新问题——混乱，不好过滤和排序。

如果你有一个很好的例子，请给我看。

【问题讨论】：

什么是 CS 课程和 BS 课程？
Google 可以成为您的朋友。 developers.google.com/chart/interactive/docs/examples
这是一个简单的 MIS 程序。数据库操作是它的主要工作。数据库中的表有很多列，它们都显示在 UI 上。
作为一个设计而不是编程问题，这个问题在 SO 上看起来不是很热门。关于设计，它实际上取决于用户期望对数据做什么以及如何组织数据（例如，分成更易于管理的部分）。在某种程度上，可以减少列宽；但这取决于它们的内容，尤其是“最坏情况”（最大内容）场景。
有时会有所帮助的是使用短列标题，特别是对于具有短值的列。例如，在您的设计中，我看到很多带有零的列仅因为它的标题而占用了大量空间。

标签： html user-interface html-table

【解决方案1】：

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

1，允许水平滚动条太长的列。这可以通过添加一个包裹表格的 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 的模式对话框来做到这一点。减少显示列数，你会发现在窄屏下会更好看。

通过编写一些 JavaScript 代码并使其在您的项目中通用，这并不难。切记要善用本地存储技术，将用户的配置保存在本地，下次用户打开此页面时恢复状态。在我的解决方案中，我的本地存储密钥是这样的：

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

my-datatable-hide-col 是固定的，/business/order 是路径，tb-order 是表的 id。这个本地存储键的值是这样的：

[0, 3, 4]

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

3,允许用户控制列的顺序。类似于上面控制列的显示状态。

这也可以通过编写一些 JavaScript 代码来实现。

【讨论】：

关于如何删除滚动并仍然显示多列的任何想法？我有来自 ML 模型的大量数据，并且我已经在使用如上所示的类似解决方案。有没有表的替代品？如数据卡或具有灵活列列表的东西

【解决方案2】：

关于更好的用户体验，如果每隔一行的颜色略有不同（就像 iTunes 在 iTunes 11 改变整个该死的设计之前所做的那样），这会有所帮助。这允许用户轻松区分每一行。

这是我的意思的一个例子： http://alistapart.com/article/zebratables

这里是如何实现它（超级简单）： http://css-tricks.com/snippets/css/css3-zebra-striping-a-table/

此外，这将取决于客户想要什么，但显然您会想要删除任何真正未使用的列。对于那些只有一个小值的列（例如一个数字），使它们尽可能小。

希望这能有所帮助...

【讨论】：

【解决方案3】：

<div style="overflow-x: auto;">
                        <table class="table">
                            <tbody>
                                <tr>
                                    <td>
                                        grams
                                    </td>
                                    <td>
                                        kilograms
                                    </td>
                                    <td>
                                        Milligrams
                                    </td>
                                    <td>
                                        Ounces
                                    </td>
                                    <td>
                                        Pounds
                                    </td>
                                    <td>
                                        Pounds+ounce
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        0
                                    </td>
                                    <td>
                                        0
                                    </td>
                                    <td>
                                        0
                                    </td>
                                    <td>
                                        0
                                    </td>
                                    <td>
                                        0
                                    </td>
                                    <td>
                                        0 lb 0 oz
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        1
                                    </td>
                                    <td>
                                        0.001
                                    </td>
                                    <td>
                                        1000
                                    </td>
                                    <td>
                                        0.0353
                                    </td>
                                    <td>
                                        0.002205
                                    </td>
                                    <td>
                                        0 lb 0.0353 oz
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        2
                                    </td>
                                    <td>
                                        0.002
                                    </td>
                                    <td>
                                        2000
                                    </td>
                                    <td>
                                        0.0706
                                    </td>
                                    <td>
                                        0.004409
                                    </td>
                                    <td>
                                        0 lb 0.0706 oz
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        5
                                    </td>
                                    <td>
                                        0.005
                                    </td>
                                    <td>
                                        5000
                                    </td>
                                    <td>
                                        0.1764
                                    </td>
                                    <td>
                                        0.011023
                                    </td>
                                    <td>
                                        0 lb 0.1764 oz
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        10
                                    </td>
                                    <td>
                                        0.01
                                    </td>
                                    <td>
                                        10000
                                    </td>
                                    <td>
                                        0.3527
                                    </td>
                                    <td>
                                        0.022046
                                    </td>
                                    <td>
                                        0 lb 0.3527 oz
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        30
                                    </td>
                                    <td>
                                        0.03
                                    </td>
                                    <td>
                                        30000
                                    </td>
                                    <td>
                                        1.0582
                                    </td>
                                    <td>
                                        0.066139
                                    </td>
                                    <td>
                                        0 lb 1.0580 oz
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        50
                                    </td>
                                    <td>
                                        0.05
                                    </td>
                                    <td>
                                        50000
                                    </td>
                                    <td>
                                        1.7637
                                    </td>
                                    <td>
                                        0.110231
                                    </td>
                                    <td>
                                        0 lb 1.7640 oz
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        100
                                    </td>
                                    <td>
                                        0.1
                                    </td>
                                    <td>
                                        100000
                                    </td>
                                    <td>
                                        3.5274
                                    </td>
                                    <td>
                                        0.220462
                                    </td>
                                    <td>
                                        0 lb 3.5270 oz
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        1000
                                    </td>
                                    <td>
                                        1
                                    </td>
                                    <td>
                                        1000000
                                    </td>
                                    <td>
                                        35.2740
                                    </td>
                                    <td>
                                        2.204623
                                    </td>
                                    <td>
                                        2 lb 3.2740 oz
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        </div>

enter image description here

【讨论】：