PHP table循环前端排版,做后台管理平台，使用表格table展示数据的最佳CSS写法!

本文介绍做后台管理平台，使用表格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