html - Column alignment issue caused by scrolling -

html - Column alignment issue caused by scrolling -

i have create kind of dashboard. table, lot of numbers (those a,b,c-s numbers, max 3 digits)

my problem is, that, can see in picture, have few sections dynamic (as in: don't know how many records) , because of this, need add together scrollbar sections.

because of scroll bars, cannot set in 1 table (or can i?), , might cause same column might not aligned time. has work in latest version browsers, , afraid of losing pixel left or right.

what trying accomplish this: (note added div in wrong place on purpose)

<table> <tr> <td>a</td> <td>b</td> </tr> <div id="div2" style="overflow-y: auto; overflow-x:hidden; height: 60px;> <tr> <td>a</td> <td>b</td> </tr> </div> <tr> <td>a</td> <td>b</td> </tr> </table>

not sure if of import or not, utilize scrollbar showing onmouseover. like one.

you need know tags need utilize before coding this.

<div> cannot come straight kid <table>. utilize <tbody> instead. though have added on purpose, suggest you. :) wrap headers in <thead> , give right padding.

so, ultimately, code should like:

<table> <thead> <tr> <td>a</td> <td>b</td> </tr> </thead> <tbody> <tr> <td>a</td> <td>b</td> </tr> </div> <tr> <td>a</td> <td>b</td> </tr> </tbody> </table>

and css like:

tbody {overflow-y: auto; overflow-x:hidden; height: 60px;}

and questions...

because of scroll bars, cannot set in 1 table (or can i?)

yes! can set them in single table appending them within <tbody> tags. note that, there can many <tbody> tags within 1 table.

i utilize scrollbar showing onmouseover.

you can using simple css.

tbody {overflow: hidden;} tbody:hover {overflow: auto;}

if want scrollbars styled how facebook has, need utilize plugin called jscrollpane.

if sense need more awesome effects on tabular data, go datatables, plug-in jquery javascript library. highly flexible tool, based upon foundations of progressive enhancement, add together advanced interaction controls html table.

html table cross-browser scroll