javascript - Jquery/CSS: Unable to set position of an element using offset() value of another element? -

i trying align numeric values in straight line below respective headers. reading x coordinate value of headers , using values set position of numeric values accordingly.

please take @ this.

in example x axis co ordinates of headings are: 96, 299, 455, 618 name, price, quantity, extendedprice, saving

i have set <span class="lotextendedprice" style=" position: absolute;left:455px;">0</span> still extended price value not in line heading. how can solve this. assume table not option. want same effect in scenario. thinking of finding x co-ordinate of header , setting position of values same value.

why can't use css table display? in case cannot depend on offset, if browser size changes, ruin view..

table values

there whole set of display values force non-table elements behave table-elements, if need happen. it's rare-ish, allows "more semantic" code while utilizing unique positioning powers of tables.

div {   display: table;   display: table-cell;   display: table-column;   display: table-colgroup;   display: table-header-group;   display: table-row-group;   display: table-footer-group;   display: table-row;   display: table-caption; } 

to use, mimic normal table structure. simple example:

<div style="display: table;">   <div style="display: table-row;">     <div style="display: table-cell;">       gross useful.     </div>   </div> </div>