Fixed table row in table

Question

I am trying to fix the position of first <tr> in <table> but it now looks like this:

but I would like to have it like this:

I tried:

<table id="myHeader" class="table table-striped table-hover table-bordered table-responsive"><tbody>
            <tr  style="position: fixed;">
                <th>Sr.</th>
                <th>Question</th>
                <th class="mobiile">Your Answer</th>
                <th>Right Answer</th>
                <th>Marks</th>
              </tr>

Can you show a bit more of your code? Two more rows? Make sure the number of `` match the number of `` — Leah, Oct 31 '17 at 07:19
It's as if you didn't have the same number of _td_ in a row as the number of _th_ in the header row... can you check that ? — Antikhippe, Oct 31 '17 at 07:20
@Leah have a look at https://i.stack.imgur.com/NgIn5.png, this will clear your doubt — NamarsahaM Networking, Oct 31 '17 at 07:27
Have a look at this https://stackoverflow.com/questions/17827908/how-to-make-fixed-header-table-inside-scrollable-div or this http://jsfiddle.net/T9Bhm/7/ — Leah, Oct 31 '17 at 08:08

Nofar Eliasi · Answer 1 · 2017-10-31T08:00:52.133

document.getElementById('theTable').addEventListener('scroll', scrollHeader);

function scrollHeader(e){
    
    var table = e.currentTarget,
        thead = table.getElementsByTagName('thead')[0];
    
    thead.scrollLeft = table.scrollLeft;
}

table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:15px;
background:#eaebec;
border:#ccc 1px solid;
border-radius:3px;
border-collapse:collapse; border-spacing: 0; 
box-shadow: 0 1px 2px #d1d1d1;
    
    display: block;
    overflow: auto;
    max-height: 200px;
    width:425px;
}
table thead {
    z-index: 1; /* put on top of other rows */
 display: block;
 position: fixed;
    
    /* make sure this header width is same as table */
    max-width: 500px;
    overflow-y: auto; /* use auto so scrollbars only appear if they need to*/
    overflow-x: hidden;
 }
thead tr td {
    background: #eaebec;
 width: 65px;
 min-width: 65px;
}
table tbody {
display: block;
padding-top: 40px;
}
table th {
padding:2px 2px 2px 2px;
border-top:0;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #ededed;
}
table tr {
text-align: center;
}
/* only using !important to override your styles below */
table td {
 margin-left: 0 !important;
    width: 65px !important;
 padding:2px 2px 2px 2px;
 border-top:0;
 border-bottom:1px solid #e0e0e0;
 border-left: 1px solid #e0e0e0;
 
}

table tr:hover td {
background: #F7FE2E;
}
table tr, table td {
width: 65px;
min-width: 65px;
}

<div id='container'>
  <div id='content'><h3><font color='blue'>Listcode - MP</font></h3>
 <div id='wrapper'>
  <table id="theTable"><thead><tr><td>Julian Date</td>
<td>Records</td>
<td>Sales</td>
<td>CPO</td>
<td>2006 Records</td>
<td>2006 Deals</td>

</tr></thead>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
</table></div></div></div>

I want my heading as fixed – NamarsahaM Networking Oct 31 '17 at 07:25 — NamarsahaM Networking, Oct 31 '17 at 07:25
dont use position fixed, just add the table width: auto ``
– Nofar Eliasi Oct 31 '17 at 07:27 — Nofar Eliasi, Oct 31 '17 at 07:27
Will that fix my header? – NamarsahaM Networking Oct 31 '17 at 07:28 — NamarsahaM Networking, Oct 31 '17 at 07:28
run the snippet that i added and see if its ok – Nofar Eliasi Oct 31 '17 at 07:30 — Nofar Eliasi, Oct 31 '17 at 07:30
But the first row is not fixed! – NamarsahaM Networking Oct 31 '17 at 07:49 — NamarsahaM Networking, Oct 31 '17 at 07:49
try to run the snippet now – Nofar Eliasi Oct 31 '17 at 08:01 — Nofar Eliasi, Oct 31 '17 at 08:01

Fixed table row in table

1 Answers1