jquery - How can I freeze the first column of table? -
i trying fix first column gridview, looked of related posts such as:
but not working. not gridviewscroll helped me. may due conflict existing css or something.
i therefore including rendered html table , css, can please me
.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 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>
something this...
i added this.
.csstablegenerator tr td:first-of-type, .csstablegenerator tr th:first-of-type { position:fixed; width: 100px; } 
Comments
Post a Comment