如何用css实现 表格第一列固定 其余内容横向滚动
可以参考此样例：
.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;}
<html>
<head>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,user-scalable=no">
<meta charset="utf-8">
<title>使用css固定table第一列</title>
<link href="css/table.css" rel="stylesheet"/>
</head>
<body>
<div class="table">
<table class="fixedTable" border="1">
<tr><td>固定列</td><td class="fixedColumn"></td><td>第一列</td><td>第二列</td><td>第三列</td><td>第四列</td><td>第五列</td><td>第六列</td><td>第七列</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
</table>
</div>
</body></html>
View Code
适用移动端
转载于：www.mdcode.cn
七鑫易维信息技术
2024-09-02 广告
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <style type="text/css"> * { 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; } </style> <script src="../Scripts/jq/jquery-2.1.4/jquery-2.1.4.js"></script> <script type="text/javascript"> $(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 = $("<th style='width:" + $("#table th:first-child").width().toString() + "px'></th><th style='width:" + $("#table th:nth-child(2)").width().toString() + "px'></th>"); $("#table th").eq(2).before($td); $td = "<td style='width:" + $("#table th:first-child").width().toString() + "px'></td><td style='width:" + $("#table th:nth-child(2)").width().toString() + "px'></td>"; $("#table tbody>tr").each(function (index, item) { $(item).find("td").eq(2).before($($td)); }); $td = $("<td style='width:" + $("#table th:last-child").width().toString() + "px'></td>"); $("#table tbody>tr>td:last-child").before($td); } }); </script></head><body> <div id="div_abroad" style="overflow-x: auto;width:300px;margin:50px auto;background:#4cff00"> <table id="table" style="border-collapse: collapse" borderColor=#000000 height=40 cellPadding=1 border=1> <thead> <tr> <th>列1</th> <th>列2</th> <th>列3</th> <th>列4</th> <th>列5</th> <th>列6</th> <th>列7</th> <th>列8</th> <th>列9</th> <th>列10</th> </tr> </thead> <tbody> <tr> <td>111111111111111111111111</td> <td>222222222</td> <td>33333333</td> <td>44444</td> <td>555555555555555555555</td> <td>66666666</td> <td>777777</td> <td>88888888</td> <td>9999999</td> <td>10959</td> </tr> <tr> <td>111111111111111</td> <td>22222222222</td> <td>333333</td> <td>444444444444</td> <td>5555555555555555</td> <td>666666666666</td> <td>777777</td> <td>88888888888888888</td> <td>999999999999</td> <td>109555559</td> </tr> <tr> <td>111111111111111</td> <td>222222222222222222222</td> <td>333333333333</td> <td>4444444</td> <td>555555555555555555555</td> <td>66666666</td> <td>777777</td> <td>88888888</td> <td>9999999</td> <td>109555999995559</td> </tr> <tr> <td>111111111111111</td> <td>22222222222</td> <td>333333eeee33</td> <td>44444</td> <td>555555555555555555555</td> <td>66666666</td> <td>777wwww777</td> <td>88888eee888</td> <td>9999ww999</td> <td>1095555559</td> </tr> <tr> <td>111111111111111</td> <td>22222222222222222222222222</td> <td>333ww33333</td> <td>44sss444</td> <td>555555555555555555555</td> <td>66666666</td> <td>777777</td> <td>88888</td> <td>9999</td> <td>10559</td> </tr> </tbody> </table> </div></body></html>
<div>
<table>
</table>
</div>
其中table里放什么东西自己定，最后设计css：
给div设定一个宽度和一个高度，并设置overflow:auto;属性
这样就会根据你table里的内容自动出现滚动条，但有一点，滚动条是在div标签出现，而不是你提供的图片那样（在外部表格的"局部"出现（这种估计实现不了））
