如何用css实现表格第一列固定其余内容横向滚动

2025-02-24 11:12:07

推荐回答（4个）

回答1：

可以参考此样例：

.table{width:100%;overflow-x: scroll;background-color:#7c95b5;}.fixedTable{width:160%;text-align: center;color:#fff;font-size:14px; border-collapse:collapse;}.fixedTable tr{line-height: 30px;border:1px solid #fff;}.fixedTable tr:first-child{height:40px;line-height: 40px;background-color:cadetblue;}.fixedTable td:first-child{position:absolute;width:105px;background-color:cadetblue;border:1px solid #fff;margin:-1px 0px 0px -1px;}.fixedColumn{width:99px;}

使用css固定table第一列

固定列	第一列	第二列	第三列	第四列	第五列	第六列	第七列
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7
固定列	1	2	3	4	5	6	7

View Code

适用移动端

转载于：www.mdcode.cn

回答2：

* { margin: 0; padding: 0; } #table { position: relative; } #table th:first-child, #table th:nth-child(2), #table th:last-child, #table tr > td:first-child, #table tr > td:nth-child(2), #table tr > td:last-child { background-color: #ff0000; position: fixed; z-index: 2; } $(function () { if ($("#table>thead>tr>th").length > 5) { //设置固定列的th和td的with都为最长的那个td的长度 var tdWith = 0; $("#table tr>td:first-child").each(function (index, item) { if ($(item).width() > tdWith) { tdWith = $(item).width(); } }); $("#table th:first-child,#table tr>td:first-child").width(tdWith); tdWith = 0; $("#table th:nth-child(2),#table tr>td:nth-child(2)").each(function (index, item) { if ($(item).width() > tdWith) { tdWith = $(item).width(); } }); $("#table th:nth-child(2),#table tr>td:nth-child(2)").width(tdWith); tdWith = 0; $("#table th:last-child,#table tr>td:last-child").each(function (index, item) { if ($(item).width() > tdWith) { tdWith = $(item).width(); } }); $("#table th:last-child,#table tr>td:last-child").width(tdWith); //设置外面div的with var div_abroadWith = 0; $("#table>tbody>tr:first-child>td").each(function (index, item) { if (index < 5) { div_abroadWith += $(item).width(); } else { return false; } }); //设置table的with var tableWith = 0; $("#table>tbody>tr:first-child>td").each(function (index, item) { tableWith += $(item).width(); }); $("#table").width(tableWith); div_abroadWith += $("#table th:last-child").width(); $("#div_abroad").width(div_abroadWith); //设置固定列的偏移量 $("#table th:first-child,tr>td:first-child").css("left", $("#div_abroad").offset().left); $("#table th:nth-child(2),tr>td:nth-child(2)").css("left", $("#div_abroad").offset().left + $("#table td:first-child").width()); $("#table th:last-child,tr>td:last-child").css("left", $("#div_abroad").offset().left + $("#div_abroad").width() - $("#table td:last-child").width()); //因为第一，二和最后一个设置定位了，所以table里缺少了3列造成滚动条不足，所以要为table补充3列，补充位置有要求，必须在第二列的后面补上第一，第二列。这两列的宽度和原先的保持一致 //最后一列的上面要补充一列，宽度和最后一列保持一致。 var $td = $(""); $("#table th").eq(2).before($td); $td = ""; $("#table tbody>tr").each(function (index, item) { $(item).find("td").eq(2).before($($td)); }); $td = $(""); $("#table tbody>tr>td:last-child").before($td); } }); 列1 列2 列3 列4 列5 列6 列7 列8 列9 列10 111111111111111111111111 222222222 33333333 44444 555555555555555555555 66666666 777777 88888888 9999999 10959 111111111111111 22222222222 333333 444444444444 5555555555555555 666666666666 777777 88888888888888888 999999999999 109555559 111111111111111 222222222222222222222 333333333333 4444444 555555555555555555555 66666666 777777 88888888 9999999 109555999995559 111111111111111 22222222222 333333eeee33 44444 555555555555555555555 66666666 777wwww777 88888eee888 9999ww999 1095555559 111111111111111 22222222222222222222222222 333ww33333 44sss444 555555555555555555555 66666666 777777 88888 9999 10559

回答3：

给你提供个思路，在表格里套表格：把除第一行和第一列外的td合并，然后在里面添加一个

其中table里放什么东西自己定，最后设计css：
给div设定一个宽度和一个高度，并设置overflow:auto;属性

这样就会根据你table里的内容自动出现滚动条，但有一点，滚动条是在div标签出现，而不是你提供的图片那样（在外部表格的"局部"出现（这种估计实现不了））

回答4：

分成两个Table 第二个装div里面不就行了

如何用css实现 表格第一列固定 其余内容横向滚动

如何用css实现表格第一列固定其余内容横向滚动