本文介绍做后台管理平台，使用表格table展示数据的最佳CSS写法!
先上效果看看↓↓
列数少的表格：(占满表格外层容器)
| 列1 | 列2 | 列3 |
|---|---|---|
| 内容1 | 内容2 | 内容3 |
列数多的表格：（出现横向滚动条，可查看完整表格内容）
| 第000001列 | 第000002列 | 第000003列 | 第000004列 | 第000005列 | 第000006列 | 第000007列 | 第000008列 | 第000009列 | 第000010列 | 第000011列 | 第000012列 | 第000013列 | 第000014列 | 第000015列 | 第000016列 | 第000017列 | 第000018列 | 第000019列 | 第000020列 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 内容000001 | 内容000002 | 内容000003 | 内容000004 | 内容000005 | 内容000006 | 内容000007 | 内容000008 | 内容000009 | 内容000010 | 内容000011 | 内容000012 | 内容000013 | 内容000014 | 内容000015 | 内容000016 | 内容000017 | 内容000018 | 内容000019 | 内容000020 |
做后台管理平台，都会涉及到使用表格table展示数据，一般会有下面几点需求：
1、不管表格列数少还是多，表格始终是占满表格外层容器
2、列头(表头单元格) 文字不换行显示
3、表格列数多，外层容器不足以显示全部的时候，出现横向滚动条，滚动可查看完整表格内容。
为满足上面3点需求，必需要加：
代码1、表格：width:100%;
代码2、表头单元格： white-space:nowrap;
代码3、表格外层加容器,控制滚动条：width:100%;overflow:auto;
代码4、表格不能加"固定表格布局"属性： table-layout: fixed;
着重强调的是这个HTML DOM tableLayout 属性：table-layout
固定表格布局：table-layout:fixed
在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关
自动表格布局：table-layout:auto
在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。
这就很好解释了如果我们加了上面的代码1~4，"表头单元格内容会挤在一起"的现象:表格单元格加了禁止换行white-space:nowrap;属性， 表格又加了 table-layout: fixed;属性，该固定表格布局属性取决于代码1中定义的表格宽度width:100%;(继承于外层容器宽度)，而不是根据单元格内容撑宽表格显示！！
参考：https://www.w3school.com.cn/cssref/pr_tab_table-layout.asp
0条评论( 网友:0 条,站长:0 条 ) 网友评论{有您的评论更精彩....}