如何冻结表格的第一列？

我试图解决的第一列一个GridView，我看着一些相关的职位，如：如何冻结表格的第一列？

，但不能得到它的工作。甚至没有gridviewscroll帮助我。可能是由于与现有的CSS或某事有冲突。

所以我包括所提供的HTML表和CSS，有人可以帮我

.CSSTableGenerator { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 90%; 
 
    border: 1px solid #000000; 
 
    -moz-border-radius-bottomleft: 0px; 
 
    -webkit-border-bottom-left-radius: 0px; 
 
    border-bottom-left-radius: 0px; 
 
    -moz-border-radius-bottomright: 0px; 
 
    -webkit-border-bottom-right-radius: 0px; 
 
    border-bottom-right-radius: 0px; 
 
    -moz-border-radius-topright: 0px; 
 
    -webkit-border-top-right-radius: 0px; 
 
    border-top-right-radius: 0px; 
 
    -moz-border-radius-topleft: 0px; 
 
    -webkit-border-top-left-radius: 0px; 
 
    border-top-left-radius: 0px; 
 
    } 
 
    .CSSTableGenerator table { 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    } 
 
    .CSSTableGenerator tr:last-child td:last-child { 
 
    -moz-border-radius-bottomright: 0px; 
 
    -webkit-border-bottom-right-radius: 0px; 
 
    border-bottom-right-radius: 0px; 
 
    } 
 
    .CSSTableGenerator table tr:first-child td:first-child { 
 
    -moz-border-radius-topleft: 0px; 
 
    -webkit-border-top-left-radius: 0px; 
 
    border-top-left-radius: 0px; 
 
    } 
 
    .CSSTableGenerator table tr:first-child td:last-child { 
 
    -moz-border-radius-topright: 0px; 
 
    -webkit-border-top-right-radius: 0px; 
 
    border-top-right-radius: 0px; 
 
    } 
 
    .CSSTableGenerator tr:last-child td:first-child { 
 
    -moz-border-radius-bottomleft: 0px; 
 
    -webkit-border-bottom-left-radius: 0px; 
 
    border-bottom-left-radius: 0px; 
 
    } 
 
    .CSSTableGenerator tr:hover td {} .CSSTableGenerator tr:nth-child(odd) { 
 
    background-color: #e5e5e5; 
 
    } 
 
    .CSSTableGenerator tr:nth-child(even) { 
 
    background-color: #ffffff; 
 
    } 
 
    .CSSTableGenerator td, 
 
    th { 
 
    vertical-align: middle; 
 
    border: 1px solid #000000; 
 
    border-width: 0px 1px 1px 0px; 
 
    text-align: left; 
 
    padding: 7px; 
 
    font-size: 10px; 
 
    font-family: Arial; 
 
    font-weight: normal; 
 
    color: #000000; 
 
    } 
 
    .CSSTableGenerator th { 
 
    background-color: #b2b2b2; 
 
    } 
 
    .CSSTableGenerator tr:last-child td { 
 
    border-width: 0px 1px 0px 0px; 
 
    } 
 
    .CSSTableGenerator tr td:last-child { 
 
    border-width: 0px 0px 1px 0px; 
 
    } 
 
    .CSSTableGenerator tr:last-child td:last-child { 
 
    border-width: 0px 0px 0px 0px; 
 
    } 
 
    .CSSTableGenerator tr:first-child td { 
 
    background: -o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2)); 
 
    background: -moz-linear-gradient(center top, #cccccc 5%, #b2b2b2 100%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#b2b2b2"); 
 
    background: -o-linear-gradient(top, #cccccc, b2b2b2); 
 
    background-color: #cccccc; 
 
    border: 0px solid #000000; 
 
    text-align: center; 
 
    border-width: 0px 0px 1px 1px; 
 
    font-size: 14px; 
 
    font-family: Arial; 
 
    font-weight: bold; 
 
    color: #000000; 
 
    } 
 
    .CSSTableGenerator tr:first-child:hover td { 
 
    background: -o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2)); 
 
    background: -moz-linear-gradient(center top, #cccccc 5%, #b2b2b2 100%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#b2b2b2"); 
 
    background: -o-linear-gradient(top, #cccccc, b2b2b2); 
 
    background-color: #cccccc; 
 
    } 
 
    .CSSTableGenerator tr:first-child td:first-child { 
 
    border-width: 0px 0px 1px 0px; 
 
    } 
 
    .CSSTableGenerator tr:first-child td:last-child { 
 
    border-width: 0px 0px 1px 1px; 
 
    } 
 
    div#ContentPlaceHolder1_ContentPlaceHolder1_HtmlEditorExtender1_popupDiv.popupDiv { 
 
    visibility: hidden; 
 
    } 
 
    textarea { 
 
    height: 50px; 
 
    width: 100%; 
 
    resize: none; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
    } 
 
    .fieldtextsmallfont { 
 
    font-size: 13px; 
 
    font-weight: lighter; 
 
    } 
 
    .labeltextsmallfont { 
 
    font-size: 13px; 
 
    font-weight: bold; 
 
    color: #000; 
 
    } 
 
    .labeltextfont { 
 
    font-size: 16px; 
 
    } 
 
    .ajax__html_editor_extender_texteditor { 
 
    padding: 5px 8px 2px 15px; 
 
    } 
 
    .gridrow span { 
 
    font-size: 13px; 
 
    font-weight: normal; 
 
    color: #000; 
 
    } 
 
    .gridheader th { 
 
    background-color: #cccccc; 
 
    border: 0px solid #000000; 
 
    text-align: center; 
 
    border-width: 0px 0px 1px 1px; 
 
    font-size: 12px; 
 
    font-family: Arial; 
 
    font-weight: bold; 
 
    color: #000000; 
 
    }

<div style="width:700px;overflow-x:scroll;"> 
 

 
    <table class="CSSTableGenerator" cellspacing="2" cellpadding="3" id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1" style="border-width:1px;border-style:Solid;width:100%;"> 
 
    <tbody> 
 
     <tr class="gridheader" style="font-weight:bold;"> 
 
     <td colspan="1"></td> 
 
     <td colspan="2">(1Q AMJ)</td> 
 
     <td colspan="2">(2Q JAS)</td> 
 
     <td colspan="2">(3Q OND)</td> 
 
     <td colspan="2">(4Q JFM)</td> 
 
     <td colspan="1"></td> 
 
     </tr> 
 
     <tr class="gridheader" style="font-weight:bold;"> 
 
     <th scope="col">Goal/Objective /Target (Provide timeframe by quarter)</th> 
 
     <th scope="col">Goal/Target</th> 
 
     <th scope="col">Results</th> 
 
     <th scope="col">Goal/Target</th> 
 
     <th scope="col">Results</th> 
 
     <th scope="col">Goal/Target</th> 
 
     <th scope="col">Results</th> 
 
     <th scope="col">Goal/Target</th> 
 
     <th scope="col">Results</th> 
 
     <th scope="col">Operation</th> 
 
     </tr> 
 
     <tr class="gridrow"> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblGOT_0">asda</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq1goal_0">da</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq1result_0">dadad</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq2goal_0">ad</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq2result_0">ada</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq3goal_0">dad</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq3result_0">a</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq4goal_0">dad</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq4result_0">adad</span> 
 
     </td> 
 
     <td style="white-space:nowrap;"> 
 
      <div style="display: inline-block;"> 
 
      <a id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lbkedit_0" href="javascript:__doPostBack('ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder1$GridView1$ctl03$lbkedit','')" style="color:Black;font-size:Small;font-weight:bold;text-decoration:underline;">Edit</a> 
 
      </div> 
 
      <div style="display: inline-block;"> 
 
      &nbsp; 
 
      <a id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lnkdelete_0" href="javascript:__doPostBack('ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder1$GridView1$ctl03$lnkdelete','')" style="color:Black;font-size:Small;font-weight:bold;text-decoration:underline;">Delete</a> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     <tr class="gridrow"> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblGOT_1">131</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq1goal_1">31</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq1result_1">313</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq2goal_1">1321</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq2result_1">131313</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq3goal_1">13</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq3result_1">313</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq4goal_1">1331</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq4result_1">1313</span> 
 
     </td> 
 
     <td style="white-space:nowrap;"> 
 
      <div style="display: inline-block;"> 
 
      <a id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lbkedit_1" href="javascript:__doPostBack('ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder1$GridView1$ctl04$lbkedit','')" style="color:Black;font-size:Small;font-weight:bold;text-decoration:underline;">Edit</a> 
 
      </div> 
 
      <div style="display: inline-block;"> 
 
      &nbsp; 
 
      <a id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lnkdelete_1" href="javascript:__doPostBack('ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder1$GridView1$ctl04$lnkdelete','')" style="color:Black;font-size:Small;font-weight:bold;text-decoration:underline;">Delete</a> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     <tr class="gridrow"> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblGOT_2">13</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq1goal_2">123</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq1result_2">1</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq2goal_2">313124234</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq2result_2"></span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq3goal_2">23423</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq3result_2">432424</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq4goal_2">242</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq4result_2">424</span> 
 
     </td> 
 
     <td style="white-space:nowrap;"> 
 
      <div style="display: inline-block;"> 
 
      <a id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lbkedit_2" href="javascript:__doPostBack('ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder1$GridView1$ctl05$lbkedit','')" style="color:Black;font-size:Small;font-weight:bold;text-decoration:underline;">Edit</a> 
 
      </div> 
 
      <div style="display: inline-block;"> 
 
      &nbsp; 
 
      <a id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lnkdelete_2" href="javascript:__doPostBack('ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder1$GridView1$ctl05$lnkdelete','')" style="color:Black;font-size:Small;font-weight:bold;text-decoration:underline;">Delete</a> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     <tr class="gridrow"> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblGOT_3">213333333333</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq1goal_3">1111111111111</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq1result_3">1111111111111</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq2goal_3">11111111111</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq2result_3">1111111111111</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq3goal_3">111111111111</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq3result_3">11111111111</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq4goal_3">111111111111</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq4result_3">11111111</span> 
 
     </td> 
 
     <td style="white-space:nowrap;"> 
 
      <div style="display: inline-block;"> 
 
      <a id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lbkedit_3" href="javascript:__doPostBack('ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder1$GridView1$ctl06$lbkedit','')" style="color:Black;font-size:Small;font-weight:bold;text-decoration:underline;">Edit</a> 
 
      </div> 
 
      <div style="display: inline-block;"> 
 
      &nbsp; 
 
      <a id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lnkdelete_3" href="javascript:__doPostBack('ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder1$GridView1$ctl06$lnkdelete','')" style="color:Black;font-size:Small;font-weight:bold;text-decoration:underline;">Delete</a> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     <tr class="gridrow"> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblGOT_4">rrrrrrrrrrr</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq1goal_4">ffff</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq1result_4">rrrrrrrrrr</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq2goal_4">rrrrrrrrrrrrrrrrrr</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq2result_4">rrrrrrrr</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq3goal_4">rrrrrrrrrrrrrrrrr</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq3result_4">rrrrrrrr</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq4goal_4">rrrrrrrr</span> 
 
     </td> 
 
     <td> 
 
      <span id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lblq4result_4">rrrrrrrrrrr</span> 
 
     </td> 
 
     <td style="white-space:nowrap;"> 
 
      <div style="display: inline-block;"> 
 
      <a id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lbkedit_4" href="javascript:__doPostBack('ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder1$GridView1$ctl07$lbkedit','')" style="color:Black;font-size:Small;font-weight:bold;text-decoration:underline;">Edit</a> 
 
      </div> 
 
      <div style="display: inline-block;"> 
 
      &nbsp; 
 
      <a id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lnkdelete_4" href="javascript:__doPostBack('ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder1$GridView1$ctl07$lnkdelete','')" style="color:Black;font-size:Small;font-weight:bold;text-decoration:underline;">Delete</a> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <textarea name="ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder1$GridView1$ctl08$ftrtxtGOT" rows="2" cols="20" id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_ftrtxtGOT"></textarea> 
 
     </td> 
 
     <td> 
 
      <textarea name="ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder1$GridView1$ctl08$ftrtxtq1goal" rows="2" cols="20" id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_ftrtxtq1goal"></textarea> 
 
     </td> 
 
     <td> 
 
      <textarea name="ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder1$GridView1$ctl08$ftrtxtq1result" rows="2" cols="20" id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_ftrtxtq1result"></textarea> 
 
     </td> 
 
     <td> 
 
      <textarea name="ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder1$GridView1$ctl08$ftrtxtq2goal" rows="2" cols="20" id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_ftrtxtq2goal"></textarea> 
 
     </td> 
 
     <td> 
 
      <textarea name="ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder1$GridView1$ctl08$ftrtxtq2result" rows="2" cols="20" id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_ftrtxtq2result"></textarea> 
 
     </td> 
 
     <td> 
 
      <textarea name="ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder1$GridView1$ctl08$ftrtxtq3goal" rows="2" cols="20" id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_ftrtxtq3goal"></textarea> 
 
     </td> 
 
     <td> 
 
      <textarea name="ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder1$GridView1$ctl08$ftrtxtq3result" rows="2" cols="20" id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_ftrtxtq3result"></textarea> 
 
     </td> 
 
     <td> 
 
      <textarea name="ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder1$GridView1$ctl08$ftrtxtq4goal" rows="2" cols="20" id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_ftrtxtq4goal"></textarea> 
 
     </td> 
 
     <td> 
 
      <textarea name="ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder1$GridView1$ctl08$ftrtxtq4result" rows="2" cols="20" id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_ftrtxtq4result"></textarea> 
 
     </td> 
 
     <td> 
 
      <a id="ContentPlaceHolder1_ContentPlaceHolder1_GridView1_lnkadd" href="javascript:__doPostBack('ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder1$GridView1$ctl08$lnkadd','')" style="color:Black;font-size:Small;font-weight:bold;text-decoration:underline;">Add</a> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 

 
</div>

来源

2016-04-22 Arbaaz

事情是这样的......

我加了这一点。

.CSSTableGenerator tr td:first-of-type, .CSSTableGenerator tr th:first-of-type { 
    position:fixed; 
    width: 100px; 
    }

https://jsfiddle.net/u4ha0hdc/

来源

2016-04-22 05:59:00 Giri

它很接近，但不完全正是我想要的。我的意思是当有垂直滚动时，行的位置会不匹配。 – Arbaaz

即使滚动到最左端，您也可以看到有重叠。你能解决这个问题吗？这将是伟大的:) – Arbaaz

所以你想要垂直和水平滚动时，行和列标题坚持？ – Giri

然而，要达到这一行为既第一行和第一列，你需要在第一行，第一列，以及第一单元从表中分离出来，然后继续设定位置这些元素是基于滚动事件的滚动位置。

$(document).ready(function() { 


$('tbody').scroll(function(e) { 
    $('thead').css("left", -$("tbody").scrollLeft()); 
    $('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()-5); 
    $('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()-5); 
    }); 
}); 

body { 


margin: 0; 
} 
th, td { 
    text-align: center; 
    background-color: white 
} 
table { 
    position: relative; 
    width: 400px; 
    overflow: hidden; 
} 
thead { 
    position: relative; 
    display: block; 
    width: 400px; 
    overflow: visible; 
} 
thead th { 
    min-width: 80px; 
    height: 40px; 
} 
thead th:nth-child(1) { 
    position: relative; 
    display: block; 
    height: 40px; 
    padding-top: 20px; 
} 
tbody { 
    position: relative; 
    display: block; 
    width: 400px; 
    height: 90px; 
    overflow: scroll; 
} 
tbody td { 
    min-width: 80px; 
} 
tbody tr td:nth-child(1) { 
    position: relative; 
    display: block; 
}

来源

2017-10-25 19:16:10

如何冻结表格的第一列？

回答

相关问题