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

Question

I am trying to align numeric values in a straight line below their respective headers. I am reading the x coordinate value of those headers and then using those values to set the position of the numeric values accordingly.

Please take a look at this.

In this example the x axis co ordinates of the headings are: 96, 299, 455, 618 for Name, Price, Quantity, ExtendedPrice, Saving

I have set <span class="lotextendedprice" style=" position: absolute;left:455px;">0</span> but still Extended price value is not in line with its heading. How can I solve this. Assume that table is not an option. I want to get the same effect in this scenario. I was thinking of finding the x co-ordinate of header and then setting the position of its values with same value.

Answer 1

Why can't you use CSS table display? In your case you cannot just depend on the offset, what if the browser size changes, this will ruin your view..

Table Values

There is a whole set of display values the force non-table elements to behave like table-elements, if you need that to happen. It's rare-ish, but it sometimes allows you to be "more semantic" with your code while utilizing the 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, just mimic normal table structure. Simple example:

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