is it possible to avoid this repetitive css declaration?
Somehow group table th and table td under just one weather-component
weather-component table th,
weather-component table td {
text-align: center !important;
}
Something like...
weather-component (table th, table td) {
text-align: center !important;
}
Not possible in CSS. But for example in LESS, you could write that as
.weather-component table {
th, td {
text-align: center !important;
}
}
Related
I already have the following CSS in my stylesheet which adds a counter to each row for all tables in the app:
tbody {
counter-reset: rowNumber;
}
tbody tr {
counter-increment: rowNumber;
}
tbody tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
I now have one table that I don't want to add the counter to, i.e., disobey the CSS rule, out of the scores of tables that the site generates. Would I need to put a unique class name for those three table elements for those tables I want to obey those rules, and then change the CSS accordingly? Ugh. Just thought there may be a way of saying, 'don't follow the css on this table' for this situation.
You could add a class to the tables that should ignore the counter styles (e.g., no-counter). Then alter your styles like so:
table:not(.no-counter) tbody {
counter-reset: rowNumber;
}
table:not(.no-counter) tbody tr {
counter-increment: rowNumber;
}
table:not(.no-counter) tbody tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
So tables that should not have counters would look like this:
<table class="no-counter">
...
</table>
More info about :not here.
The best solution would be to apply styles additively. That is, add a class to all your tables, then change the CSS:
.mytable tbody {}
.mytable tbody > tr {}
and so on. You will almost always encounter <table>s where you do not want the specific, site-wide styles, and then it's as trivial as leaving the mytable class from the table element.
If you can't do that, another option is the :not() selector: Exclude all tables with a class plain:
table:not(.plain) tbody {}
Is it possible using less to do a conditional? The logic I want is if a table > tr > td has an a tag, then apply padding: 20px on the a tag. If there is no a tag in the td, then apply the padding on the td itself.
What you are suggesting is not possible in CSS so LESS won't be able to do it either.
However, we can try to be clever:
table > tr > td {
padding-top: 20px;
}
table > tr > td a {
margin-top: -20px;
padding-top: 20px;
}
It looks weird and "hacky", but if i may, so does your request :)
According to the W3Schools CSS notes, if you use an ID on an element, then the CSS styles defined for that ID (using #id_name) should only apply to that element, and this is how you should style an element which only appears once.
I've a site which includes a display table (of actual tabular data, it's a grid of phone numbers in different classifications). So I've placed the table inside a div and set the div to have an ID. I then defined styles for the ID in the stylesheep.
HTML:
<div id='phone_number_grid'>
<table>
...
</table>
</div>
CSS:
#phone_number_grid table {
border-collapse: collapse;
}
#phone_number_grid th,td {
border: 1px solid #000040;
background-color: #ccccff;
padding: 5px;
}
The style works perfectly on the table it's intended for, but it is also affecting a completely different table which has no class or id settings, and is contained in a completely unrelated div with it's own (completely unrelated) class settings, on a different page that uses the same stylesheep.
How do I stop the #phone_number_grid styles from affecting unrelated tables?
Note I previously tried the same thing using a class ID on the div, with the same results - the styles "leaked" onto other tables that didn't mention them.
Q1: Why are these styles applying themselves to elements that don't reference them?
Q2: Is there a CSS way of saying "do not apply any styles at all to this specific element"?
Your second style extends to all td elements, instead of just those belong to table #phone_number. Update as per below.
#phone_number_grid table {
border-collapse: collapse;
}
#phone_number_grid th, #phone_number_grid td {
border: 1px solid #000040;
background-color: #ccccff;
padding: 5px;
}
#phone_number_grid th,td affects all #phone_number_grid th and all td, not only all #phone_number_grid th and all #phone_number_grid td.
So write in your selector:
#phone_number_grid th, #phone_number_grid td
Your problem is with this line:
#phone_number_grid th,td {
CSS selectors separated by commas aren't actually read like you'd first expect. They're two separate selectors, so you're actually matching #phone_number_grid th and all td elements.
You need to be a little more explicit:
#phone_number_grid th,
#phone_number_grid td {
...
}
Putting the selector on its own line may make it easier to see as well.
tYou don't have to define it as a table.
#phone_number_grid table{
border-collapse: collapse;
}
#phone_number_grid th, #phone_number_grid td {
border: 1px solid #000040;
background-color: #ccccff;
padding: 5px;
}
I have a table structure, where I can't access jsp file to add class files. I have to manage it through CSS. In this case, I need to apply background color for first table all th's. Not to nested table th's. How can we do this with CSS? Example : http://jsfiddle.net/qdDnJ/
As per i understand may you can write like this:
tr th{
background:red;
}
tr table th{
background:none;
}
Check this http://jsfiddle.net/qdDnJ/2/
Distinguish first table's th from the second table's th.
Edited after comment:
See here, http://jsfiddle.net/qdDnJ/25/
I have assumed that div is parent container of first table.
You can replace it with table's parent.
e.g. If body is parent, css should be,
body > table > tbody > tr > th {
background-color:red;
}
You could do this:
table th:first-child {
background: red;
}
table table th:first-child {
background: none;
}
I would just give the outer table a class and use this:
table.class-name th:first-child {
background: red;
}
Every body tried many things to achieve the target as per the question.
but as per the HTML we can just write the following css and avoid child th to get background-color..
in this solution we do not need any id and class or any thing accept the .gap class. Even if this class is not there we can apply the css.
check the demo
HERE is the CSS with .gap class
table th {background-color:red;}
table td.gap tr th {background:none;}
HERE is the CSS without .gap class
table th {background-color:red;}
table td tr th {background:none;}
The simplest way I know is to use the child selector
#yourtableId > tbody > tr > th { background: red; }
Demo
If table is set to have a border on a high level, how can i make sure that classes inhering from it do not have any borders set?
table,td,th {
border: 1px solid #0B6121;
}
how can i make sure that my other table has no borders at all?
table.menu {
border: none;
- and no border for td
- and no border for th
}
table.main, table.menu td, table.menu td {
border: none;
}
This way I guess. The idea is to set rules for siblings of your particular table.
table.menu, .menu th, .menu td {
border:none;
}
sometyhing like this?
Like this :
table.menu td, table.menu tr{
border:none;
}
As your code stands
<table class="menu"></table>
will not have an outside border, but any th and td elements inside will inherit the border from your global selector.
The other answers that demonstrate applying specific rules to the td and th elements inside of a table with class of 'menu' should help you out.