Question

21

HTML table cell alignment

rated 0 times [ 25] [ 4] / answers: 1 / hits: 15423 / 12 Years ago, wed, september 19, 2012, 12:00:00

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

enter

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

hugo

Add To Favorites

Follow

Total Points: 21

Total Questions: 120

Total Answers: 107

Location: Belarus

Member since Tue, Jul 20, 2021

3 Years ago

answered 12 Years ago emileef · Accepted Answer

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.