如何用css实现 表格第一列固定 其余内容横向滚动
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用css实现 表格第一列固定 其余内容横向滚动相关的知识，希望对你有一定的参考价值。
最好是能给这列td或th单独定义css或js控制，这样比较好，有没有这种定义的呀
可以参考此样例：
.tablewidth:100%;overflow-x: scroll;background-color:#7c95b5;.fixedTablewidth:160%;text-align: center;color:#fff;font-size:14px; border-collapse:collapse;.fixedTable trline-height: 30px;border:1px solid #fff;.fixedTable tr:first-childheight:40px;line-height: 40px;background-color:cadetblue;.fixedTable td:first-childposition:absolute;width:105px;background-color:cadetblue;border:1px solid #fff;margin:-1px 0px 0px -1px;.fixedColumnwidth: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
参考技术A<!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> 参考技术B 给你提供个思路，在表格里套表格：把除第一行和第一列外的td合并，然后在里面添加一个
<div>
<table>
</table>
</div>
其中table里放什么东西自己定，最后设计css：
给div设定一个宽度和一个高度，并设置overflow:auto;属性
这样就会根据你table里的内容自动出现滚动条，但有一点，滚动条是在div标签出现，而不是你提供的图片那样（在外部表格的"局部"出现（这种估计实现不了）） 参考技术C 分成两个Table 第二个装div里面不就行了
如何用css控制浏览器滚动条
用CSS控制滚动条样式1,Overflow内容溢出时的设置
overflow 水平及垂直方向内容溢出时的设置
overflow-x 水平方向内容溢出时的设置
overflow-y 垂直方向内容溢出时的设置
以上三个属性设置的值为visible、scroll、hidden、auto
visible 默认值。使用该值时，无论设置的"width"和"height"的值是多少，其中的内容无论是否超出范围都将被强制显示。
hidden 效果与visible相反。任何超出"width"和"height"的内容都会不可见。
scroll 无论内容是否超越范围，都将显示滚动条。 auto 当内容超出范围时，显示滚动条，否则不显示。
应用:
没有水平滚动条:
<div style="overflow-x:hidden">test</div>
没有垂直滚动条 ：
<div style="overflow-y:hidden">test</div>
没有滚动条 ：
<div style="overflow-x:hidden;overflow-y:hidden" 或
style="overflow:hidden">test</div>
自动显示滚动条：
<div style="height:100px;width:100px;overflow:auto;">test</div>
2,自己定义滚动条的颜色
我们一般默认的滚动条样式如下左图,右图是放大了1600倍的样子,我们可以看到滚动条有几种言责组合的,我给他们标了7个号,分别注释在下面的css代码的后面了,注意css的注释代码是放在两个斜杠内的两个星号之间,如:/*这里放注释的代码*/
Body
scrollbar-arrow-color: #f4ae21; /*图6,三角箭头的颜色*/
scrollbar-face-color: #333; /*图5,立体滚动条的颜色*/
scrollbar-3dlight-color: #666; /*图1,立体滚动条亮边的颜色*/
scrollbar-highlight-color: #666; /*图2,滚动条空白部分的颜色*/
scrollbar-shadow-color: #999; /*图3,立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: #666; /*图4,立体滚动条强阴影的颜色*/
scrollbar-track-color: #666; /*图7,立体滚动条背景颜色*/
scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/
Cursor:url(mouse.cur); /*自定义个性鼠标*/
以上2项适用与<body>、<div>、<textarea>、<iframe> 参考技术A 具体自己去更改样式会比较麻烦。你可以在网上搜一下jQuery插件。写好的直接套用就可以了。在百度搜索关键词“jquery控制滚动条样式”出来一大片。自己选择吧。本回答被提问者采纳 参考技术B 为什么要控制滚动条，让其显示和不显示？还是设置样式
以上是关于如何用css实现 表格第一列固定 其余内容横向滚动的主要内容，如果未能解决你的问题，请参考以下文章