表头单元格文本设置不换行

在使用Bootstrap表格时，当表格有很多列的情况下，可能会出现表头单元格中的中文或者英文换行的情况。这不仅破坏表格的布局，而且当给<table>标签添加上.table-responsive样式后，表头的自动换行行为会使得Bootstrap表格无法显示水平方向的滚动条。这是并不是我们期望的行为。

一、错误示例

中文表格-表头单元格自动换行：

上表中，中文表头被严重挤压后自动换行，表格的第一行数据也被自动换行。在已经给<table>标签添加上.table-responsive样式的情况下，只有在表头文字被挤压成完全垂直的一列后，表格才会显示水平方向的滚动条。大部分情况下，我们并不希望表格以这种布局展现，很不美观，而且非常影响表格数据的可读性。

英文表格-表头单元格自动换行：

上表中，英文表格的可读性要比起中文表格好一些，表头虽然被自动换行，但是换行的位置在单词间的空格处。给<table>标签添加上.table-responsive样式的情况下，表格显示出了水平方向的滚动条。

造成错误示例的原因：

产生这种情况的原因是，中文文本和英文文本的换行规则在css样式表中未定义。在未定义换行规则的情况下，white-space的缺省值为normal。值为normal时，当表格单元格宽度减小时，中文文本会以单个中文字进行换行，英文文本则是在英文单词间的空格处进行换行，所以就出现上述的情况。

避免这种情况的解决方案非常简单，我们只需要在css样式表文本的换行规则即可，强制文本不进行换行。在已经给<table>标签添加上.table-responsiveBootstrap样式的情况下，再给<th>标签加上下面的css样式即可：

th {
  white-space: nowrap; 
}

二、正确示例

中文表格-表头单元格不换行：

英文表格-表头单元格不换行：

上面两个表格的表头没有换行~

三、小结

上面使用的表格例子仅仅用作展示表头换行的演示。

其实水平滚动条的体验并不友好。当表格信息超出了用户的视觉范围，用户需要以拖拽的方式查看，这非常影响表格信息的可读性。在理想情况下，我们是不希望出现水平滚动条的。所以当设计的时候，如果表格真的有这么多列，作为一个设计师还是应该好好思考：

• 表格信息内容、组织方式是否合适？
• 哪些信息可以删除？哪些信息可以折叠或隐藏？哪些信息可以精简或重组？
• 是否能更充分的利用页面的宽度来展示表格信息？

在实际项目中，表格指标过多的情况是非常常见，尤其是后台管理、数据分析、ERP等系统中。在无法避免的情况下，也可以通过一些小优化提高表格信息的可读性，比如：

• 固定表格表头和标题列。
• 用户可以自定义配置需要显示的表格列。
• 用户可以拖动表格列改变表格列的排序。
• 通过交互操作，隐藏或折叠表格列。
• 提供搜索、筛选、排序等功能。
• 单元格文字过多的情况下考虑截断，使用hover或单击后完整显示。

表格的形式适合展示大量关联的信息，信息结构、信息对比在表格中一目了然。如何保证表格信息展示的可读性、降低用户误读、便于快速扫描？

这是一门深奥的学问，我们有机会再聊。

四、参考资料

Bootstrap开发文档：https://getbootstrap.com/docs/4.3/content/tables/

MOZ CSS开发文档：https://developer.mozilla.org/en-US/docs/Web/CSS/white-space