javascript - Produce horizontal scroll for table 'tbody' -

javascript - Produce horizontal scroll for table 'tbody' -

i have traditional table thead, tbody,etc. necessary tablesorter.js.

what have:

<div id="tablewrapper"> <div id="tablecontainer" class="tablecontainer"> <table id="scrolltable"> <thead class="fixedheader"> <tr class="tableheader even"> <th class="header"> <span>name</span> </th> <th class="header"> <span>address</span> </th> </tr> </thead> <tbody class="scrollcontent"> <tr class="tablerow"> <td class="td_0"> <span> doe, john </span> </td> <td class="td_0"> <span> memory lane </span> </td> </tr> </tbody> </table> </div> </div>

css:

#tablewrapper tbody{ color:#00467f; font-weight:500; position:absolute; overflow-y: auto; overflow-x: scroll; height:300px; width:300px; } #tablewrapper #tablecontainer{ width: 1100px; overflow: hidden; } #tablewrapper tbody>tr{ width: 1200px; }

i keeping table header section vertically fixed, tbody position absolute maintain table header outside tbody vertical scroll event. tried setting width of tbody>tr higher tbody no luck.

the tbody>tr width automatically shrinks size of tbody.

problem: can't tbody horizontal scrollbar scroll without horizontally scrolling entire table, (thus vertical scrollbar disappear overflow:hidden). want scroll tbody horizontally , have jquery bind event header. no issue there. trying horizontal scrollbar scroll tbody only.

i able tbody overflow-y:auto work, not overflow-x:auto. there way create tr wider tbody scroll left , right? if so, how?

ah figured out.

i added float:left; , display:block tbody>tr.

css:

#tablewrapper tbody>tr{ display:block; float:left; width: 1200px; /*desired width*/ }

javascript jquery html css tablesorter