0

I have seen this major topic how do I create an HTML table with fixed/frozen left column and scrollable body? and I tried to adapt but I constantly fail due to the fact that I use the thead and tbody tags and none of that examples do.

The thead is composed by the days of the month, and the tbody has the employers names. 

<table>
  <thead>
    <tr>
      <th></th>
      <th>01 July</th>
      <th>02 July</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Employee 1</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Employee 2</td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

I need the td that contains the employers names to be fixed while scrolling horizontally.

JSFiddle example

Community
  • 1
  • 1
Linesofcode
  • 5,327
  • 13
  • 62
  • 116
  • Please have a look at this link : [your question answered here](http://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body) – Amin Pourhadi Jul 27 '16 at 09:07

2 Answers2

2

You can achieve this (using exactly the markup you have given in your question) by using position:fixed

table {
position: relative;
left: -10px;
}

thead tr th:nth-of-type(1),
tbody tr td:nth-of-type(1) {
display: block;
position: fixed;
z-index: 6;
width: 100px;
height: 20px;
background-color: rgb(255,255,255);
}

th, td:nth-of-type(n+2) {
min-width: 80px;
text-align:center;
}

th:nth-of-type(2),
td:nth-of-type(2) {
padding-left: 104px;
}
<table class="table table-hover">
  <thead>
    <tr>
      <th></th>
      <th>01 July</th>
      <th>02 July</th>
      <th>03 July</th>
      <th>04 July</th>
      <th>05 July</th>
      <th>06 July</th>
      <th>07 July</th>
      <th>08 July</th>
      <th>09 July</th>
      <th>10 July</th>
      <th>11 July</th>
      <th>12 July</th>
      <th>13 July</th>
      <th>14 July</th>
      <th>15 July</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Employee 1</td>
      <td></td>
      <td></td>
      <td></td>
      <td>Vacation</td>
      <td>Vacation</td>
      <td>Vacation</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Employee 2</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>Vacation</td>
      <td>Vacation</td>
      <td>Vacation</td>
    </tr>
  </tbody>
</table>
Rounin
  • 27,134
  • 9
  • 83
  • 108
  • Don't forget I'm using bootstrap framework and therefore it doesn't work your code properly. – Linesofcode Jul 27 '16 at 10:00
  • I'm sorry, I am not really familiar with Bootstrap - I am sure that if you know Bootstrap then you will be able to tweak the styles above a little so that they become Bootstrap compatible! – Rounin Jul 27 '16 at 15:24
1

Please check below code.

th, td {
 white-space: nowrap; border:1px solid #ccc; padding:5px 0;
}

.first-col {
  position: absolute;
 width: 5.6em;
 margin-left: -5.7em; background:#ffffff;
}

.table-wrapper {
    overflow-x: scroll;
 width: 430px;
 margin: 0 0 0 5.3em;
}
<div class="container">
    <div class="table-wrapper">
        <table class="table table-bordered table-striped table-hover" cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th class="first-col">&nbsp;</th>
                    <th>Table heading1</th>
                    <th>Table heading</th>
                    <th>Table heading</th>
                    <th>Table heading</th>
                    <th>Table heading</th>
     <th>Table heading</th>
                    <th>Table heading</th>
                    <th>Table heading</th>
                    <th>Table heading</th>
                    <th>Table heading</th>
     <th>Table heading</th>
     <th>Table heading</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="first-col">Employee1</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
     <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                </tr>
                <tr>
                    <td class="first-col">Employee2</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
     <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Is this want you want?

rockey dsouza
  • 84
  • 7