CODEWITHSUNDEEP
javascripthtmlcssjquery-mobile
Balkrishna Rawool
Balkrishna Rawool

Reputation: 1863

HTML table cell alignment

I am using jQuery mobile and I would like to create a listview which should look like

enter image description here

It looks very simple to achieve and I have got almost everything except the right-alignment of the column on the right. Note that every three cells on the right-column are merged. Any help is appreciated. Thanks.

Update: Here is my code:

<ul data-role="listview" id="mylist"><li><table><tr><td><label class="label1">EUR</label></td><td rowspan="3"><label class="price">1.3245</label></td></tr><tr><td><label class="label2">vs</label></td></tr><tr><td><label class="label3">USD</label></td></tr></table></li><li><table><tr><td><label class="label1">EUR</label></td><td rowspan="3"><label class="price">0.89</label></td></tr><tr><td><label class="label2">vs</label></td></tr><tr><td><label class="label3">GBP</label></td></tr></table></li></ul>

Upvotes: 2

Views: 15515

Answers (3)

Balkrishna Rawool
Balkrishna Rawool

Reputation: 1863

After struggling for a while I figured out what the problem was. In my code I'm creating several tables. (One table for each <li>.) So when I right-align the text in the right-column, it is right-aligned with-in each table. But when all these tables are seen one-below-the-other the text doesn't appear to be right aligned. The solution is to right align right-columns in all tables and also maintain fixed width in all tables.e.g. .price{ font-size: 30px; width:200px; text-align: right; }

Thanks Joe W and Rafael de Souza for your help.

Upvotes: 2

Joe W
Joe W

Reputation: 1881

If you change your css by adding text-align: right it should get you the results you need.

before:

.price{ font-size: 30px;}

after:

.price{ font-size: 30px; text-align: right;}

Upvotes: 1

Rafael de Souza
Rafael de Souza

Reputation: 279

Well, as you did not post your code, I can do nothing more than it to help you

View here

Code:

jQuery('tr').each(function() {
  if (this.cells[1]) {
    this.cells[1].style.textAlign = 'right';
  }
});

Upvotes: 5

Related Questions