Rule Selection in CSS
I have an HTML page in which I want my content to be centered but, within a specific table on that page, I need to have many of the cells be left-aligned and many to be right-aligned and one cell to be center-aligned. Here's a snippet of HTML & CSS that should give you an idea of what I'm trying to do:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.contentWrapper {
width: 1000px;
border: 1px solid black;
margin: auto;
}
.centerAligned {
text-align: center;
}
.myTable td {
width: 200px;
text-align: left;
}
.myTable td.label {
text-align: right;
}
</style>
</head>
<body>
<div class="contentWrapper centerAligned">
<p>A label for this table...</p>
<table class="myTable" border="1" align="center">
<tr>
<td class="label">Label 1 (Right Aligned开发者_如何学Python)</td>
<td>Value 1 (Left Aligned)</td>
<td class="label">Label 2 (Right Aligned)</td>
<td>Value 2 (Left Aligned)</td>
</tr>
<tr>
<td class="label">Label 3 (Right Aligned)</td>
<td>Value 3 (Left Aligned)</td>
<td class="label">Label 4 (Right Aligned)</td>
<td>Value 4 (Left Aligned)</td>
</tr>
<tr>
<td colspan="4" class="centerAligned">
<input type="button" value="Push Me!">
</td>
</tr>
</table>
<p>Some more content...</p>
</div>
</body>
</html>
I didn't really want to put a class into every single td just to handle how they should be aligned, so I opted to set a default alignment for ".myTable td" of left. This allowed me to leave all the "value" cells to be without a class, but I still need to define one for my "label" cells to get a right alignment for those.
When it comes to the button at the bottom, which I would like to be center aligned, I want to be able to use the class "centerAligned". Unfortunately, using it here doesn't do anything as the ".myTable td" class is considered "more precise" and that cell is given a left alignment instead of a centered one.
I'm using "centerAligned" in other places, so I don't want to simply do away with that class, nor do I want to change the name to something else. I can do this:
.centerAligned, .myTable td.centerAligned {
text-align: center;
}
That seems to work, but this whole thing seems kinda smelly to me. Is there a better way to handle styling these table cells to get the effect that I want without having to define a specific class for every single td?
Thanks!
Use col
Have a look here: http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4
Or here for XHTML http://www.w3.org/TR/2004/WD-xhtml2-20040722/mod-tables.html#sec_26.2.
Why don't you just use a 'th' tag for your labels and put a css on that? That way you wont need to put a label class on all of the td 'labels'. So
.myTable th {
width: 200px;
text-align: right;
}
as mentioned in another answer this should be able to be done with colgroup and col but it can't and the colspan is the reason why, how would a 'colspanned' row know which col to take it's alignment from?
I would perhaps feel like suggesting :nth-child but I think it might suffer the same issue when a colspan was met, and you wouldn't get IE support so here's a fiddle which needs no classes and still uses specificity to get the desired result
working example based on opening code with a colspan - JSFIDDLE
You can use jQuery
$('#myTable tr td:eq(0)').css('text-align', 'left');
$('#myTable tr td:eq(1)').css('text-align', 'center');
$('#myTable tr td:eq(2)').css('text-align', 'right');
eq is zero based. So all first cells will be left aligned, all second cells will be center aligned and so on. Adjust to your needs.
You didn't quite describe which position the cells are that need to be right aligned vs. left aligned. But as Bazz suggested you can use col to set styles for all s in that col or maybe you can do the same with a style if your right-aligned cells are in the same row.
If you're able to use col, all you need is:
<table>
<col>
<col class="label">
<col>
<tr>...
Then
.label { text-align: right }
There's nothing wrong with the way you're doing it though...
加载中,请稍侯......
精彩评论