All geek questions in one place

CSS rules selection

I have an HTML page in which I want my content to be centered, but in a specific table on this page, I need many of the cells to be left-aligned and many to be right-aligned and one cell to be aligned to the center. Here is a snippet of HTML and 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)</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 really didn’t want to put the class in each separate td just to handle how they should be aligned, so I decided to set the default alignment for “.myTable td” on the left. This allowed me to leave all the cells “value” without a class, but I still need to define one for my “labels” in order to get the correct alignment for them.

When it comes to the button below, which I would like to center, I want to be able to use the "centerAligned" class. Unfortunately, using it here does nothing, because the ".myTable td" class is considered "more accurate" and that the cell is assigned left alignment instead of centered.

I use "centerAligned" in other places, so I don’t want to just delete this class and don’t want to change the name to something else. I can do it:

 .centerAligned, .myTable td.centerAligned { text-align: center; }

It sounds like work, but it all smelly to me. Is there a better way to handle styling these table cells to get the effect I want without having to define a specific class for each individual td?

Thanks!

+4
source share
5 answers

Why don't you just use the 'th' tag for your shortcuts and overlay css? Thus, you do not need to put a label class on all td labels. So

.myTable th { width: 200px; text-align: right; }

+2
source

as mentioned in another answer, this one must be done with colgroup and col , but it cannot, and colspan is the reason why, how would the “colspanned" row know col to align with?

Perhaps I would like to suggest :nth-child , but I think this can lead to the same problem when colspan was encountered, and you would not get IE support, so here you need a fiddle there are no classes and still uses specificity to get the desired result

working example based on opening code with colspan - JSFIDDLE

+1
source

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 based on zero. Thus, all the first cells will be left-aligned, all cells will be centered, and so on. Adjust your needs.

0
source

You did not quite describe in which position the cells should be aligned to the right or left. 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 style if your right-aligned cells are on the same line.

If you can use col, all you need is:

 <table> <col> <col class="label"> <col> <tr>...

Then

 .label { text-align: right }

There is nothing wrong with how you do it, though ...

0
source

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

More articles:


All Articles