Question

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

enter image description here

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

我尝试将多个列合并为一个，但它带来了一些新问题 - 混乱，不适合过滤和排序。

如果你有一个很好的例子，请告诉我。

Answer 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，允许用户控制列的顺序。它类似于控制列＆＃39;显示上面的状态。

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

Answer 2

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

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

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

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

希望其中一些有帮助...

Answer 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

具有许多列的HTML表的设计

3 个答案: