最近，我遇到了一个 HTML 表格设计问题。我有一个 CS 程序，我想把它重建成一个 BS 程序。这是 UI 屏幕截图。
如您所见，它的列太多。将出现一个水平滚动条。如何改善用户体验？
我尝试将几列合二为一，但它带来了一些新问题——混乱，不好过滤和排序。
如果你有一个很好的例子，请给我看。
问问题
10563 次
3 回答
5
经过长时间的思考，并不完美，但我找到了一些解决方法。我在这里发布我的解决方案以供参考。
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 代码并使其在您的项目中通用，这并不难。切记善用Local Storage技术，将用户的配置保存在本地，下次用户打开此页面时恢复状态。在我的解决方案中，我的本地存储密钥是这样的：
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 代码并使其通用来完成。
于 2017-07-30T08:15:56.353 回答
0
关于更好的用户体验，如果每隔一行的颜色略有不同（就像 iTunes 在 iTunes 11 改变整个该死的设计之前所做的那样），它会有所帮助。这允许用户轻松区分每一行。
这是我的意思的一个例子：http: //alistapart.com/article/zebratables
这里是如何实现它（超级简单）： http ://css-tricks.com/snippets/css/css3-zebra-striping-a-table/
此外，这将取决于客户想要什么，但显然你会想要删除任何真正未使用的列。对于那些只有一个小值的列（例如，一个数字），使它们尽可能小。
希望有些帮助...
于 2013-04-22T15:08:22.663 回答
0
<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>
于 2020-11-25T16:00:00.567 回答