我需要一个简单的解决方案。我知道这和其他一些问题类似,比如:
固定标题和固定列的HTML表? 我如何锁定表的第一行和第一列时滚动,可能使用JavaScript和CSS?
但我只需要一个单独的左列被冻结,我更喜欢一个简单的和无脚本的解决方案。
我需要一个简单的解决方案。我知道这和其他一些问题类似,比如:
固定标题和固定列的HTML表? 我如何锁定表的第一行和第一列时滚动,可能使用JavaScript和CSS?
但我只需要一个单独的左列被冻结,我更喜欢一个简单的和无脚本的解决方案。
当前回答
在左列宽度固定的情况下,Eamon Nerbonne提供了最佳解决方案。
在可变宽度左列的情况下,我发现的最佳解决方案是制作两个相同的表,并将一个放在另一个上面。演示:http://jsfiddle.net/xG5QH/6/。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* important styles */
.container {
/* Attach fixed-th-table to this container,
in order to layout fixed-th-table
in the same way as scolled-td-table" */
position: relative;
/* Truncate fixed-th-table */
overflow: hidden;
}
.fixed-th-table-wrapper td,
.fixed-th-table-wrapper th,
.scrolled-td-table-wrapper td,
.scrolled-td-table-wrapper th {
/* Set background to non-transparent color
because two tables are one above another.
*/
background: white;
}
.fixed-th-table-wrapper {
/* Make table out of flow */
position: absolute;
}
.fixed-th-table-wrapper th {
/* Place fixed-th-table th-cells above
scrolled-td-table td-cells.
*/
position: relative;
z-index: 1;
}
.scrolled-td-table-wrapper td {
/* Place scrolled-td-table td-cells
above fixed-th-table.
*/
position: relative;
}
.scrolled-td-table-wrapper {
/* Make horizonal scrollbar if needed */
overflow-x: auto;
}
/* Simulating border-collapse: collapse,
because fixed-th-table borders
are below ".scrolling-td-wrapper table" borders
*/
table {
border-spacing: 0;
}
td, th {
border-style: solid;
border-color: black;
border-width: 1px 1px 0 0;
}
th:first-child {
border-left-width: 1px;
}
tr:last-child td,
tr:last-child th {
border-bottom-width: 1px;
}
/* Unimportant styles */
.container {
width: 250px;
}
td, th {
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="fixed-th-table-wrapper">
<!-- fixed-th-table -->
<table>
<tr>
<th>aaaaaaa</th>
<td>ccccccccccc asdsad asd as</td>
<td>ccccccccccc asdsad asd as</td>
</tr>
<tr>
<th>cccccccc</th>
<td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
<td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
</tr>
</table>
</div>
<div class="scrolled-td-table-wrapper">
<!-- scrolled-td-table
- same as fixed-th-table -->
<table>
<tr>
<th>aaaaaaa</th>
<td>ccccccccccc asdsad asd as</td>
<td>ccccccccccc asdsad asd as</td>
</tr>
<tr>
<th>cccccccc</th>
<td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
<td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
</tr>
</table>
</div>
</div>
</body>
</html>
其他回答
我把埃尔蒙·纳邦的答案编辑了一下,让它与填满整个宽度的表格一起工作。
http://jsfiddle.net/DYgD6/6/
<!DOCTYPE html>
<html><head><title>testdoc</title>
<style type="text/css">
body {
font:16px Calibri;
}
table {
border-collapse:separate;
border-top: 3px solid grey;
}
td {
margin:0;
border:3px solid grey;
border-top-width:0px;
white-space:nowrap;
}
#outerdiv {
position: absolute;
top: 0;
left: 0;
right: 5em;
}
#innerdiv {
width: 100%;
overflow-x:scroll;
margin-left: 5em;
overflow-y:visible;
padding-bottom:1px;
}
.headcol {
position:absolute;
width:5em;
left:0;
top:auto;
border-right: 0px none black;
border-top-width:3px;
/*only relevant for first row*/
margin-top:-3px;
/*compensate for top border*/
}
.headcol:before {
content:'Row ';
}
.long {
background:yellow;
letter-spacing:1em;
}
</style></head><body>
<div id="outerdiv">
<div id="innerdiv">
<table>
<tr>
<td class="headcol">1</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">2</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">3</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">4</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">5</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">6</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">7</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">8</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">9</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
</table>
</div></div>
</body></html>
固定列的宽度仍然需要一个设定值。
如果你在webdeveloper的地狱里,需要让它在IE6上工作,下面是我使用的示例代码:
<html>
<head>
<style type="text/css">
.fixme {
position: relative;
left: expression( ( 20 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
background-color: #FFFFFF;
}
</style>
</head>
<body>
<table width="1500px" border="2">
<tr>
<td class="fixme" style="width: 200px;">loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet</td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
</tr>
<tr>
<td class="fixme" style="width: 200px;">loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
</tr>
<tr>
<td class="fixme" style="width: 200px;">loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
</tr>
<tr>
<td class="fixme" style="width: 200px;">loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
</tr>
</table>
</body>
</html>
这可能只适用于IE6,所以在CSS中使用条件注释。
有点晚了,但我确实在为自己尝试解决方案时遇到了这个线程。假设您现在使用的是现代浏览器,我提出了一个使用CSS calc()来帮助保证满足宽度的解决方案。
.table-fixed-left table, .table-fixed-right table { border-collapse: collapse; } .table-fixed-right td, .table-fixed-right th, .table-fixed-left td, .table-fixed-left th { border: 1px solid #ddd; padding: 5px 5px; } .table-fixed-left { width: 120px; float: left; position: fixed; overflow-x: scroll; white-space: nowrap; text-align: left; border: 1px solid #ddd; z-index: 2; } .table-fixed-right { width: calc(100% - 145px); right: 15px; position: fixed; overflow-x: scroll; border: 1px solid #ddd; white-space: nowrap; } .table-fixed-right td, .table-fixed-right th { padding: 5px 10px; } <div class="table-fixed-left"> <table> <tr> <th>Normal Header</th> </tr> <tr> <th>Header with extra line <br/> </th> </tr> <tr> <th>Normal Header</th> </tr> <tr> <th>Normal with extra line <br/> </th> </tr> <tr> <th>Normal Header</th> </tr> <tr> <th>Normal Header</th> </tr> </table> </div> <div class="table-fixed-right"> <table> <tr> <th>Header</th> <th>Another header</th> <th>Header</th> <th>Header really really really really long</th> </tr> <tr> <td>Info Long</td> <td>Info <br/>with second line</td> <td>Info <br/>with second line</td> <td>Info Long</td> </tr> <tr> <td>Info Long</td> <td>Info Long</td> <td>Info Long</td> <td>Info Long</td> </tr> <tr> <td>Info <br/>with second line</td> <td>Info <br/>with second line</td> <td>Info <br/>with second line</td> <td>Info</td> </tr> <tr> <td>Info</td> <td>Info</td> <td>Info</td> <td>Info</td> </tr> <tr> <td>Info</td> <td>Info</td> <td>Info</td> <td>Info</td> </tr> </table> </div>
希望这能帮助到一些人!
这是一个有趣的jQuery插件,可以创建固定的标题和/或列。 在演示页面上将固定列切换为true,以查看其实际操作。
$(document).ready(function() { var table = $('#example').DataTable( { scrollY: "400px", scrollX: true, scrollCollapse: true, paging: true, fixedColumns: { leftColumns: 3 } } ); } ); <head> <title>table</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"> <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.dataTables.min.css"> <script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.2.4/js/dataTables.fixedColumns.min.js"></script> <style> th, td { white-space: nowrap; } div.dataTables_wrapper { width: 900px; margin: 0 auto; } </style> </head> <table id="example" class="stripe row-border order-column" style="width:100%"> <thead> <tr> <th>First name</th> <th>Last name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> <th>Extn.</th> <th>E-mail</th> </tr> </thead> <tbody> <tr> <td>Tiger</td> <td>Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> <td>5421</td> <td>t.nixon@datatables.net</td> </tr> <tr> <td>Garrett</td> <td>Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> <td>8422</td> <td>g.winters@datatables.net</td> </tr> <tr> <td>Ashton</td> <td>Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> <td>1562</td> <td>a.cox@datatables.net</td> </tr> <tr> <td>Cedric</td> <td>Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>$433,060</td> <td>6224</td> <td>c.kelly@datatables.net</td> </tr> <tr> <td>Airi</td> <td>Satou</td> <td>Accountant</td> <td>Tokyo</td> <td>33</td> <td>2008/11/28</td> <td>$162,700</td> <td>5407</td> <td>a.satou@datatables.net</td> </tr> <tr> <td>Brielle</td> <td>Williamson</td> <td>Integration Specialist</td> <td>New York</td> <td>61</td> <td>2012/12/02</td> <td>$372,000</td> <td>4804</td> <td>b.williamson@datatables.net</td> </tr> <tr> <td>Herrod</td> <td>Chandler</td> <td>Sales Assistant</td> <td>San Francisco</td> <td>59</td> <td>2012/08/06</td> <td>$137,500</td> <td>9608</td> <td>h.chandler@datatables.net</td> </tr> <tr> <td>Rhona</td> <td>Davidson</td> <td>Integration Specialist</td> <td>Tokyo</td> <td>55</td> <td>2010/10/14</td> <td>$327,900</td> <td>6200</td> <td>r.davidson@datatables.net</td> </tr> <tr> <td>Colleen</td> <td>Hurst</td> <td>Javascript Developer</td> <td>San Francisco</td> <td>39</td> <td>2009/09/15</td> <td>$205,500</td> <td>2360</td> <td>c.hurst@datatables.net</td> </tr> <tr> <td>Sonya</td> <td>Frost</td> <td>Software Engineer</td> <td>Edinburgh</td> <td>23</td> <td>2008/12/13</td> <td>$103,600</td> <td>1667</td> <td>s.frost@datatables.net</td> </tr> <tr> <td>Jena</td> <td>Gaines</td> <td>Office Manager</td> <td>London</td> <td>30</td> <td>2008/12/19</td> <td>$90,560</td> <td>3814</td> <td>j.gaines@datatables.net</td> </tr> <tr> <td>Sakura</td> <td>Yamamoto</td> <td>Support Engineer</td> <td>Tokyo</td> <td>37</td> <td>2009/08/19</td> <td>$139,575</td> <td>9383</td> <td>s.yamamoto@datatables.net</td> </tr> <tr> <td>Thor</td> <td>Walton</td> <td>Developer</td> <td>New York</td> <td>61</td> <td>2013/08/11</td> <td>$98,540</td> <td>8327</td> <td>t.walton@datatables.net</td> </tr> <tr> <td>Finn</td> <td>Camacho</td> <td>Support Engineer</td> <td>San Francisco</td> <td>47</td> <td>2009/07/07</td> <td>$87,500</td> <td>2927</td> <td>f.camacho@datatables.net</td> </tr> <tr> <td>Serge</td> <td>Baldwin</td> <td>Data Coordinator</td> <td>Singapore</td> <td>64</td> <td>2012/04/09</td> <td>$138,575</td> <td>8352</td> <td>s.baldwin@datatables.net</td> </tr> <tr> <td>Zenaida</td> <td>Frank</td> <td>Software Engineer</td> <td>New York</td> <td>63</td> <td>2010/01/04</td> <td>$125,250</td> <td>7439</td> <td>z.frank@datatables.net</td> </tr> <tr> <td>Zorita</td> <td>Serrano</td> <td>Software Engineer</td> <td>San Francisco</td> <td>56</td> <td>2012/06/01</td> <td>$115,000</td> <td>4389</td> <td>z.serrano@datatables.net</td> </tr> <tr> <td>Jennifer</td> <td>Acosta</td> <td>Junior Javascript Developer</td> <td>Edinburgh</td> <td>43</td> <td>2013/02/01</td> <td>$75,650</td> <td>3431</td> <td>j.acosta@datatables.net</td> </tr> <tr> <td>Cara</td> <td>Stevens</td> <td>Sales Assistant</td> <td>New York</td> <td>46</td> <td>2011/12/06</td> <td>$145,600</td> <td>3990</td> <td>c.stevens@datatables.net</td> </tr> <tr> <td>Hermione</td> <td>Butler</td> <td>Regional Director</td> <td>London</td> <td>47</td> <td>2011/03/21</td> <td>$356,250</td> <td>1016</td> <td>h.butler@datatables.net</td> </tr> <tr> <td>Lael</td> <td>Greer</td> <td>Systems Administrator</td> <td>London</td> <td>21</td> <td>2009/02/27</td> <td>$103,500</td> <td>6733</td> <td>l.greer@datatables.net</td> </tr> <tr> <td>Jonas</td> <td>Alexander</td> <td>Developer</td> <td>San Francisco</td> <td>30</td> <td>2010/07/14</td> <td>$86,500</td> <td>8196</td> <td>j.alexander@datatables.net</td> </tr> <tr> <td>Shad</td> <td>Decker</td> <td>Regional Director</td> <td>Edinburgh</td> <td>51</td> <td>2008/11/13</td> <td>$183,000</td> <td>6373</td> <td>s.decker@datatables.net</td> </tr> <tr> <td>Michael</td> <td>Bruce</td> <td>Javascript Developer</td> <td>Singapore</td> <td>29</td> <td>2011/06/27</td> <td>$183,000</td> <td>5384</td> <td>m.bruce@datatables.net</td> </tr> <tr> <td>Donna</td> <td>Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>4226</td> <td>d.snider@datatables.net</td> </tr> </tbody> </table>
在数据表的帮助下,这很容易做到。对数据表不熟悉的人,请参考https://datatables.net/。它是一个插件,提供了很多功能。在给出的代码中,标题是固定的,前3列是固定的,其他几个特征也在那里。