0

I have a table which has td columns with contenteditable='true'. If the field is edited that column might get wider. I need to have the Fixed Header table with horizontal and vertical scroll for the content. I tried many fixed header plug-ins but was of no help.

JSFiddle link:

JSFIddle

HTML:

<div id="outdiv">
    <table border="1" id="billingResult" >
        <thead>
            <tr> 
                <th>Month</th>
                <th>Date</th>
                <th>Location</th>
                <th>Country</th>
                <th>Type</th>
                <th>Serial</th>
                <th>KKL</th>
                <th>Period</th>
                <th>Service ID</th>
                <th>Assign Code</th>
                <th>State</th>
                <th>Validation</th>
                <th>Validator</th>
                <th>Select Code</th>
                <th>LMI</th>
                <th>ABI</th>
                <th>Rate</th>
                <th>Old Rate</th>
                <th>Update Time</th>
                <th>Update Person</th>
                <th>Comments</th>
                <th>Address</th>
            </tr>
        </thead>
        <tbody>
            <tr> 
                <td contenteditable='true'>January</td>
                <td contenteditable='true'>01-01-2016</td>
                <td contenteditable='true'>US</td>
                <td contenteditable='true'>US</td>
                <td contenteditable='true'>KLM45FG</td>
                <td contenteditable='true'>0236DG0478</td>
                <td contenteditable='true'>1234</td>
                <td contenteditable='true'>-</td>
                <td contenteditable='true'>LOK96310</td>
                <td contenteditable='true'>AD</td>
                <td contenteditable='true'>RT</td>
                <td contenteditable='true'>Done</td>
                <td contenteditable='true'>John</td>
                <td contenteditable='true'>SL</td>
                <td contenteditable='true'>000111111111LKAMDJDKDJDDK222555</td>
                <td contenteditable='true'>039DG0</td>
                <td contenteditable='true'>55</td>
                <td contenteditable='true'>96</td>
                <td contenteditable='true'>01-01-2016 15:36:23</td>
                <td contenteditable='true'>Rob</td>
                <td contenteditable='true'>-</td>
                <td contenteditable='true'>-</td>
            </tr>
            <tr> 
                <td contenteditable='true'>January</td>
                <td contenteditable='true'>01-01-2016</td>
                <td contenteditable='true'>US</td>
                <td contenteditable='true'>US</td>
                <td contenteditable='true'>KLM45FG</td>
                <td contenteditable='true'>0236DG0478</td>
                <td contenteditable='true'>1234</td>
                <td contenteditable='true'>-</td>
                <td contenteditable='true'>LOK96310</td>
                <td contenteditable='true'>AD</td>
                <td contenteditable='true'>RT</td>
                <td contenteditable='true'>Done</td>
                <td contenteditable='true'>John</td>
                <td contenteditable='true'>SL</td>
                <td contenteditable='true'>000111111111LKAMDJDKDJDDK222555</td>
                <td contenteditable='true'>039DG0</td>
                <td contenteditable='true'>55</td>
                <td contenteditable='true'>96</td>
                <td contenteditable='true'>01-01-2016 15:36:23</td>
                <td contenteditable='true'>Rob</td>
                <td contenteditable='true'>-</td>
                <td contenteditable='true'>-</td>
            </tr>
            <tr> 
                <td contenteditable='true'>January</td>
                <td contenteditable='true'>01-01-2016</td>
                <td contenteditable='true'>US</td>
                <td contenteditable='true'>US</td>
                <td contenteditable='true'>KLM45FG</td>
                <td contenteditable='true'>0236DG0478</td>
                <td contenteditable='true'>1234</td>
                <td contenteditable='true'>-</td>
                <td contenteditable='true'>LOK96310</td>
                <td contenteditable='true'>AD</td>
                <td contenteditable='true'>RT</td>
                <td contenteditable='true'>Done</td>
                <td contenteditable='true'>John</td>
                <td contenteditable='true'>SL</td>
                <td contenteditable='true'>000111111111LKAMDJDKDJDDK222555</td>
                <td contenteditable='true'>039DG0</td>
                <td contenteditable='true'>55</td>
                <td contenteditable='true'>96</td>
                <td contenteditable='true'>01-01-2016 15:36:23</td>
                <td contenteditable='true'>Rob</td>
                <td contenteditable='true'>-</td>
                <td contenteditable='true'>-</td>
            </tr>
            <tr> 
                <td contenteditable='true'>January</td>
                <td contenteditable='true'>01-01-2016</td>
                <td contenteditable='true'>US</td>
                <td contenteditable='true'>US</td>
                <td contenteditable='true'>KLM45FG</td>
                <td contenteditable='true'>0236DG0478</td>
                <td contenteditable='true'>1234</td>
                <td contenteditable='true'>-</td>
                <td contenteditable='true'>LOK96310</td>
                <td contenteditable='true'>AD</td>
                <td contenteditable='true'>RT</td>
                <td contenteditable='true'>Done</td>
                <td contenteditable='true'>John</td>
                <td contenteditable='true'>SL</td>
                <td contenteditable='true'>000111111111LKAMDJDKDJDDK222555</td>
                <td contenteditable='true'>039DG0</td>
                <td contenteditable='true'>55</td>
                <td contenteditable='true'>96</td>
                <td contenteditable='true'>01-01-2016 15:36:23</td>
                <td contenteditable='true'>Rob</td>
                <td contenteditable='true'>-</td>
                <td contenteditable='true'>-</td>
            </tr>
            <tr> 
                <td contenteditable='true'>January</td>
                <td contenteditable='true'>01-01-2016</td>
                <td contenteditable='true'>US</td>
                <td contenteditable='true'>US</td>
                <td contenteditable='true'>KLM45FG</td>
                <td contenteditable='true'>0236DG0478</td>
                <td contenteditable='true'>1234</td>
                <td contenteditable='true'>-</td>
                <td contenteditable='true'>LOK96310</td>
                <td contenteditable='true'>AD</td>
                <td contenteditable='true'>RT</td>
                <td contenteditable='true'>Done</td>
                <td contenteditable='true'>John</td>
                <td contenteditable='true'>SL</td>
                <td contenteditable='true'>000111111111LKAMDJDKDJDDK222555</td>
                <td contenteditable='true'>039DG0</td>
                <td contenteditable='true'>55</td>
                <td contenteditable='true'>96</td>
                <td contenteditable='true'>01-01-2016 15:36:23</td>
                <td contenteditable='true'>Rob</td>
                <td contenteditable='true'>-</td>
                <td contenteditable='true'>-</td>
            </tr>
            <tr> 
                <td contenteditable='true'>January</td>
                <td contenteditable='true'>01-01-2016</td>
                <td contenteditable='true'>US</td>
                <td contenteditable='true'>US</td>
                <td contenteditable='true'>KLM45FG</td>
                <td contenteditable='true'>0236DG0478</td>
                <td contenteditable='true'>1234</td>
                <td contenteditable='true'>-</td>
                <td contenteditable='true'>LOK96310</td>
                <td contenteditable='true'>AD</td>
                <td contenteditable='true'>RT</td>
                <td contenteditable='true'>Done</td>
                <td contenteditable='true'>John</td>
                <td contenteditable='true'>SL</td>
                <td contenteditable='true'>000111111111LKAMDJDKDJDDK222555</td>
                <td contenteditable='true'>039DG0</td>
                <td contenteditable='true'>55</td>
                <td contenteditable='true'>96</td>
                <td contenteditable='true'>01-01-2016 15:36:23</td>
                <td contenteditable='true'>Rob</td>
                <td contenteditable='true'>-</td>
                <td contenteditable='true'>-</td>
            </tr>
            <tr> 
                <td contenteditable='true'>January</td>
                <td contenteditable='true'>01-01-2016</td>
                <td contenteditable='true'>US</td>
                <td contenteditable='true'>US</td>
                <td contenteditable='true'>KLM45FG</td>
                <td contenteditable='true'>0236DG0478</td>
                <td contenteditable='true'>1234</td>
                <td contenteditable='true'>-</td>
                <td contenteditable='true'>LOK96310</td>
                <td contenteditable='true'>AD</td>
                <td contenteditable='true'>RT</td>
                <td contenteditable='true'>Done</td>
                <td contenteditable='true'>John</td>
                <td contenteditable='true'>SL</td>
                <td contenteditable='true'>000111111111LKAMDJDKDJDDK222555</td>
                <td contenteditable='true'>039DG0</td>
                <td contenteditable='true'>55</td>
                <td contenteditable='true'>96</td>
                <td contenteditable='true'>01-01-2016 15:36:23</td>
                <td contenteditable='true'>Rob</td>
                <td contenteditable='true'>-</td>
                <td contenteditable='true'>-</td>
            </tr>
        </tbody>
    </table>
</div>

CSS:

#outdiv  { 
  height:250px; 
  overflow:auto; 
}

table tr > td { 
  white-space: nowrap;
  padding: 5px;
}

Need help please!

Yajnesh Rai
  • 290
  • 1
  • 6
  • 17
  • Check this http://stackoverflow.com/a/1312678/7302405 – shubham agrawal Mar 16 '17 at 10:49
  • Possible duplicate of [how do I create an HTML table with fixed/frozen left column and scrollable body?](http://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body) – Extricate Mar 16 '17 at 10:51
  • I need to fix the table header @shubhamagrawal, that's the important thing. The above link has first column fixed. – Yajnesh Rai Mar 16 '17 at 13:01

1 Answers1

0

Check this new Sticky Table jQuery plugin. It's fully responsive and doesn't depend on the cell's content so you can edit it as you please. It supports both vertical and horizontal scrolling.

Ahmed Rafik Ibrahim
  • 538
  • 1
  • 4
  • 16