CSS如何实现表格首行首列固定和自适应窗口

　　介绍

这篇文章主要讲解了“CSS如何实现表格首行首列固定和自适应窗口”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS如何实现表格首行首列固定和自适应窗口”吧!

先了解几个概念:

<强>表布局:

表布局属性有两种特定值:
<强>汽车(预设值)-表格的总宽度决定每一个储存格(细胞)的最大值
<强> 固定——表格的总宽度决定于表格宽度的定义,以及各栏位宽度(列)的定义,没有定义宽度就平分表格宽度。
表格宽度通过表格的宽度来设置,某一列的宽度仅<强>由该列首行的单元格决定,其他行单元格的宽度不会影响整列的宽度。
注意:自定义宽度要定义在首个单元格才有效果(th)

<强>位置:粘性

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。
在目标区域中可见时,他的行为就像相对不会有任何变化,而当页面滚动超出目标区域时,他的表现改为固定会固定于目标位置
粘元素会“固定”在离它最近的一个拥有“<强>滚动机制强”的祖先上(当该祖先的溢出是隐藏的,滚动,汽车、叠加时),即便这个祖先不是最近的真实可滚动祖先。
<强>要注意的是当位置:粘性应用于表,只能作用于th和td,作用tr没有效果,并且一定要定义目标位置左/右/上/下才会出现固定效果!

<强>实现:

<强> 1。自适应
表格外包一层div,宽度100%,溢出出现滚动条

.box  { 　　,,,,,宽度:,100%; 　　,,,,,身高:,200 px; 　　,,,,,背景颜色:,# eee; 　　,,,,,溢出:,汽车; 　　,,,,,,保证金:,10 px; 　　,,,}

表格表,宽度100%,设置一个最小宽度,我这里设置1000 px,这个根据个人设定哈

table  { 　　,,,,,宽度:,100%; 　　,,,,,min-width:, 1000 px; 　　,,,,,,/*,自定义宽度要设置成fixed  */,,,,,表布局:,固定; 　　,,,,,/*,设置单元格间距,*/,,,,,border-spacing: 0; 　　,,,}

2。固定首行首列
需要在首行th和首列设置粘性定位
<强>首行设置

thead  tr  th  { 　　,,,,,/*,th设置粘性定位,*/,,,,,,背景颜色:粉色; 　　,,,,,位置:,粘性; 　　,,,,,:,0; 　　,,,,,,,/*,顶部border  */,,,,,,,border-top:, 1 px  solid 黑色; 　　,,,}

<强>首列设置

,道明:first-child  { 　　,,,,,/*,td第一个粘性定位,*/,,,,,位置:,粘性; 　　,,,,,左:,0; 　　,,,,,背景颜色:,天蓝色; 　　,,,}

如果需要改变单元格宽度,需要设置表布局:固定
这个属性设置了默认单元格平宽表分度,如果首列第一个单元格(th)设置了固定宽度200 px,那么这列宽度就是200 px
注意是第一个单元格

td:第一个孩子,th: first-child  { 　　,,,,,,,,/*,设置首列200,,设置th才有效,这里加上道明主要是为了设置边境*/,,,,,,,,宽度:,200 px; 　　,,,,,,,,border-left:, 1 px  solid 黑色; 　　,,,}

<强>还有一个注意地方是边框边界,要单独设定每个单元格边框边界,如果边境崩溃,滚动会跟着动,效果不好看。

<强>整体代码:

& lt; ! DOCTYPE  html> 　　& lt; html  lang=癳n"祝辞 　　& lt; head> 　　& lt;才能meta  charset=癠TF-8"比; 　　& lt;才能meta  name=皏iewport",内容=翱矶?设备宽度,初始=1.0,比; 　　& lt;才能title> Document</title> 　　& lt;才能style> 　　,,,*,{ 　　,,,,,填充:,0; 　　,,,,,保证金:,0; 　　,,,} 　　 　　,,,.box  { 　　,,,,,宽度:,100%; 　　,,,,,身高:,200 px; 　　,,,,,背景颜色:,# eee; 　　,,,,,溢出:,汽车; 　　,,,,,保证金:,10 px; 　　,,,} 　　,,,table  { 　　,,,,,宽度:,100%; 　　,,,,,min-width:, 1000 px; 　　,,,,,,/*,自定义宽度要设置成fixed  */,,,,,表布局:,固定; 　　,,,,,/*,设置单元格间距,*/,,,,,border-spacing: 0; 　　,,,} 　　,,,, 　　,,,td, th  { 　　,,,,,边界底部:,1 px  solid 黑色; 　　,,,,,边境:,1 px  solid 黑色; 　　,,,,,box-sizing:, border-box; 　　,,,,,/*,超出长度显示,…*/,,,,,白色空间:,nowrap;} 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

CSS如何实现表格首行首列固定和自适应窗口