css手写一个表头固定

时间：2023-03-30 22:14:30 CSS

Bootstrap、layui等前端框架固定表头，实现了表格的滚动，但是刚入职的公司选择手动渲染表格，后来觉得表数据太长，想做一个表头固定。为了避免代码改动太多，我决定修复手写表头。遇到的主要问题是修复后数据表和表头的对齐问题。我也看了很多我的文章，也尝试过，但都不是很成功。我不得不自己尝试一下。固定表头的大致思路是布局两张表，一张表头，一张表体，然后给表体加上height和overflow-y缩略图标题总价总销售额每周销售额增加产品评级分配开发SKU产品状态th>审核备注时间操作

<表格边框>这里应该有图片纯色纯色家居装饰抱枕套床沙发腰垫套多色0.9913113107-21%5.0张乐abcadawdadawdawdadad开发成功备注上线：2016-07-02收录：2018-06-25增加td>这里应该有图PlainSolidThrow家居装饰枕套床沙发腰垫套多色0.9913113107-21%5.0张乐abcadawdadawdawdadad开发成功备注上线时间：2016-07-02收藏时间：2018-06-25添加这里应该有图素色纯色抱枕套床沙发腰垫套多色0.9913113107-21%5.0张乐abcadawdadawdawdadad开发成功备注上线：2016-07-02收录：2018-06-25增加这里应该有图片素色纯色抱枕家居装饰枕套床沙发腰垫套多色0.9913113107-21%5.0张乐abcadawdadawdawdadad开发成功备注上线时间：2016-07-02收藏时间：2018-06-25添加这里应该有图PlainSolidThrowHome花色枕套床沙发腰垫套多色0.9913113107-21%5.0张乐开发成功备注上线：2016-07-02收录：2018-06-25增加

两个表定义的不一致也导致了表头和表的错位。这里，需要使用来调整两个表的列宽定义一致两个table标签下都定义了相同的，注意列数和table一样，最后一列不需要定义固定宽度，可以看出还是没有对齐.这里有两个问题，一是表格主体加滚动条后会占用17px左右的宽度，二是表格table-lay的列宽out的默认值是单元格内容自动支持的，所以要调整这两个，我的方法是在表头加一个padding_right:17px；两个表都设置为table-layout:fixedcsscode.content{width:80%;}表{宽度：100%；边界崩溃：崩溃；边框：1px实心#ccc；颜色：#4c4c4c；}th,td{padding:5px;}.table_body{高度：312px；溢出-y：滚动；}.table_head{padding-right:17px;}.table_bodytable,.table_headtable{table-layout:fixed;}这样完美对齐，适合任何屏幕宽度有几个地方需要注意我的两个表格都包裹在div中，主要是表格的display:table属性导致padding,overflow等属性难以设置，所以它可以设置在包装的div上。毕竟桌子布置的实在是太深了，不敢磕磕碰碰