All geek questions in one place

How to get items in a “column” for right alignment?

I have a simple two-column table; I want to align the data in the first column on the right and be able to style the two elements individually. Perhaps the table is not the best solution here, but I do not know what else to try. I tried with column groups, but this does not work. Even when I try to apply text-align: right to the 'label' element.

 <table> <colgroup> <col class="label" /> <col class="price" /> </colgroup> <tr> <td><label>Subtotal:</label></td> <td>$135.00</td> </tr> <tr> <td><label>Taxes:</label></td> <td>$11.23</td> </tr> </table>
+4
source share
6 answers

Since you are probably talking about cell headers, I would go for a different approach:

 <style type="text/css"> table th { text-align: right; } table td { text-align: left; } </style> <table> <tr> <th>Right aligned</th> <td>Left aligned</td> </tr> </table>
+4
source

Give an id or class to your HTML tags. for example .. Then use css to style them as you want.

 tr#cell1{ text-align:right; }

Use this for each line that you want to align separately.

+2
source

The label is not aligned right because it is an inline element. If you give it display:block or display:inline-block , it will fill the entire cell of the table and apply the right alignment:

 label { display: block; text-align: right; }
+1
source

It must be done!

 <html> <head> <style> .one { width:100px; border:1px solid red; } .one label { display:block; width:100%; text-align:right; } .two { width:150px; border:1px solid green; } </style> </head> <body> <table> <tr> <td class="one"><label>one</label></td> <td class="two">two</td> </tr> </table> </body> </html>
0
source

Try to assign a class to the table cell

 <td class="sub">…</td>

and then create them using CSS:

 table td { // style for all except .sub } table td.sub { text-align: right; // and other styles that differ from rest }
0
source

If you don't want to turn the td element into th , you can do this:

 <style type="text/css"> table td:first-child { text-align: right; } </style> <table> <tr> <td>Right aligned</td> <td>Left aligned</td> </tr> </table>

This works well with Firefox, Chrome, and IE 8 (maybe IE 7 too).

0
source

Source: https://habr.com/ru/post/1334897/

More articles:


All Articles