我正在尝试修复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;">
<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;">
<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;">
<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;">
<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;">
<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>
答案 0 :(得分：0)
像这样......
我添加了这个。
.CSSTableGenerator tr td:first-of-type, .CSSTableGenerator tr th:first-of-type {
position:fixed;
width: 100px;
}
答案 1 :(得分：0)
但是，要为第一行和第一列获取此行为，您需要将第一行，第一列和第一个单元与表分开，然后根据滚动的位置连续设置这些元素的位置。桌面主体，滚动事件。
$(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;
}