Different text-align for columns in a table

M Badger

I'm trying to create a table where the left 3 columns have text-align: left and the remaining columns have text-align: center. I would like to do it without setting a class on every td. I know I can't apply text-align to colgroup or col but I've been trying to use those tags to apply a style to the th and td in those colgroup's. E.g.

#content table colgroup.holeinfo td {text-align: left}

But that doesn't work and I'm a bit stuck without resorting to:

I'm not keen on heading that way since that would seem tedious and inefficient. And it feels like there ought to be a better way to do it! xhtml 1.0 strict / css 2.1 I set up the base table styles as follows:

#content table {
/* fix base table appearance */
width: 100%;
border: 2px solid #000;
border-collapse: collapse;
margin-bottom: 30px;
}

#content table td, #content table th {
/* fix standard cell settings in tables */
padding: 2px;
border: 1px solid #000;
margin-bottom: 3px;
text-align: center;
background: #383838;
}

Then the table looks like this:

Morning

Hole

Par

SI

Gross Score

Gross Points

Net Score

Net Points

Yellow Ball

Yellow Ball Points

-

36

-

45 (+9)

12

37 (+1)

18

3

26

1

4

9

5

1

4

2

Y

4

2

4

11

6

-

5

1

N

1

Thanks, Mike

Lost User

Assuming that the browser you are aiming your webpage(s) at can handle CSS3, then the CSS3 tag :nth-child(N) may help Try this ... it should only apply the CSS to the second and subsequent TD and TH tags after the first TD and TH tag.

#content table tr td:nth-child(n+2), #content table th:nth-child(n+2) {
/* fix standard cell settings in tables */
padding: 2px;
border: 1px solid #000;
margin-bottom: 3px;
text-align: center;
background: #383838;
}

This is how that pseudo-class works http://reference.sitepoint.com/css/understandingnthchildexpressions[^] Let us know how (or if) it works for you.

M Badger

Thanks for that, I had just started with that pseudo-class but I wasn't making much progress, however your code worked - though I changed the argument to -n+3 to catch columns 1 to 3. I am left wondering about a CSS 2.1 solution though, or is there nothing more effective than the td class="..." in 2.1? It's not too much of a problem since the audience is very limited and probably only some of their mobile browsers would get stroppy with CSS3 code (and it's not like it's mission critical or anything).

#content table.player th:nth-child(-n+3), #content table.player td:nth-child(-n+3) { text-align: left; }

For reference, the following option (using Chrome inspect element) assigns text-align to the colgroup but (a) it gets assigned to both colgroup span="3" and colgroup span="6" (b) the td doesn't see it at all, presumably since td doesn't descend from col or colgroup. if I change it to this then it works somewhat better but still doesn't left-align the text, obviously I replaced the span="3" with 3 col's (and if I added a fourth it didn't have the text-align: left). I am assuming that reason (b) above is still at play.

#content table colgroup col:nth-child(-n+3) { text-align: left; }

I was then tempted to add the td as follows:

#content table colgroup.holeinfo td { text-align: left; }

The text-align: center doesn't show up an any of the elements so I stopped heading in that direction at all. Mike

M Badger

By the way I didn't change the base table to be centered on only some columns rather than all (as you proposed) since several tables rely on the same css and some need all (cols 1 to n) to be centered, some need only col 1 to be left, some need cols 1-n to be left. So I figured the most effective way was to make everything centered and then add specific css for tables with columns that need to be left. Let me know if I've totally missed the point of your suggestion since clearly I've done the reverse of your methodology for the reasons above. Mike

Lost User

Referencing my :nth-child(n+2) the (n+2) adjust according to your needs, but you need to ensure that the hierarchy is correct, but ...

Mike-MadBadger wrote:

So I figured the most effective way was to make everything centered and then add specific css for tables with columns that need to be left.

That certainly will work and you wont have to worry if browsers are css3 compliant, and if your problem is solved, then fine :)

vvashishta

Make a Tag and then put tags in it... set align property of first three as Left, and rest as center.. Your Job Done - Happy Coding - Vishal Vashishta