How do I get elements in a 'column' to right-align?
I have a 开发者_Python百科simple two column table; I want a way to align the data in the first column to the right and to be able to style the two elements separately. Perhaps a table is not the best solution here, but I don't know what else to try. I tried with column groups, but it isn't working. Even when I try applying 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>
Since you're probably talking about heading cells, I'd 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>
Give id or class to your HTML tags. eg .. Then use css to style them as you want.
tr#cell1{
text-align:right;
}
Use this for every row yoou want to align seperately
Label doesn't right align because it is an inline-element. If you give it display:block or display:inline-block it will fill the whole table cell and apply your right align:
label {
display: block;
text-align: right;
}
Try to give the table cell a class
<td class="sub">…</td>
and then style them with CSS:
table td {
// style for all except .sub
}
table td.sub {
text-align: right;
// and other styles that differ from rest
}
This should do!
<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>
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>
It works well with Firefox, Chrome and IE 8 (probably IE 7 too).
加载中,请稍侯......
精彩评论