I have two different tables. I set text-center in all rows and cells but In one table I must to have last td and th like this :
tr:last-child > td:first-child {
text-align: right;
}
tr:last-child {
font-weight: 900;
}
And it works well, but to all my tables I create. In the second I want to be default td and tr, but it takes my earlier css with right text-align and font-weight.
How to do, to my css work only in one table? Not all?
add some class to your tables and use it to define the css rule. Define the specific rule for the class that you wanna to.
instead tr:last-child, use .tableClassName:last-child
Related
Essentially, I'm setting a background on nth rows and cols in a table using CSS. Is it possible to style the intersecting cells in a different color?
I have the following CSS that styles the rows and cols of the table:
table.stats tbody tr:nth-child(even) {
background: #e4eae3;
}
table.stats tr td:nth-child(even), table.stats tr th:nth-child(even) {
background: #ccddbb;
}
Worst case, I could set the classes to individual cells in my server side code accordingly and style those...
You could try being just a bit more specific with your selectors. You're changing each column you want, and each row you want, and all you'd have to do is to set the column within the cells. So for example, something like:
table.stats tbody tr:nth-child(even) td:nth-child(even) { ... }
I want to apply a style to all cells (td elements) inside a given table, and not any other tables. Is there a way to do this in CSS without having to specify a class for each td in the table I want to apply the style to?
For example, let's say I want to make all cells in a particular table have a padding of 3px on all four edges. To do this for every td I could declare:
td { padding: 3px 3px 3px 3px; }
Problem: this applies to every single td on the page. I just want to apply to this a single, named table, or alternatively, to all tables of a given class.
Any ideas?
#someTable td { padding: 3px 3px 3px 3px; }
This will apply your style to only a specific table
.someTable td { padding: 3px 3px 3px 3px; }
This will apply the change to all tables with the given class
As others have answered, having the td element's styles declared as a descendant selector (learn more here) or a child selector (learn more here) belonging to a parent selector, instead of declaring them without the hierarchy would solve your problem.
The only thing I'd like to add is that the descendant and child selectors operate with a slight difference as mentioned below in the comments below:
.my_table_class td { padding: 3px; } // will apply to all td elements underneath
// .my-table-class (also to tables nested
// below)
.my_table_class > td { padding: 3px; } // will apply to td elements immediately
// under .my-table-class
add class to or id to table that you want to target for example
.yourTableClass td{Your Style here}
Use This.
td.tbl_class{your style;}
I have set up the following example: http://jsfiddle.net/SXEty/
<style>
table td, th { padding: 8px; text-align: left; }
table td:nth-child(1) { color: red; }
table td { color: blue }
</style>
...
<table>
<tr><th>Name</th><th>Age</th><th>City</th></tr>
<tr><td>Bob</td><td>27</td><td>Los Angeles</td></tr>
<tr><td>Charlie</td><td>34</td><td>San Diego</td></tr>
<tr><td>Daniel</td><td>41</td><td>San Francisco</td></tr>
</table>
I'm curious why the first column is colored as red instead of blue.
In my CSS, I set every first child to color "red". But then my next line of CSS sets every element to color "blue". Wouldn't the second line of CSS (color: blue) override the previous line (color: red)? Or is it that the nth-child property has precedence? If it does have precedence, is this true for all browsers?
Because td:nth-child(1) is more specific than just td.
There's a great overview of CSS specificity with a Star Wars theme that I suggest
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
Because table td:nth-child(1) is a more specific selector, it will have precedence over table td even if the latter is declared later.
What's interesting is if you target a parent ID with table td, everything will turn blue - even if table td:nth-child(1) is declared later in the CSS sheet.
http://jsfiddle.net/mLrAf/2/
I have following CSS:
table tbody tr:last-child td {
padding-top: 7px;
border-bottom: 0;
}
table tbody tr:first-child td {
padding-top: 6px;
}
Now I may have a table with just one row.
The only table row is now assigned to first-child instead of last-child, but I want it to be the other way around.
Is there a way without Javascript?
This can't be. You must have some mistake in your markup. If it really is the only tr, both last AND first will match.
See example
However, which CSS will be applied depends on the order of you css-rules. So you can determine whether padding-top: 7px; or padding-top: 6px; shall applie by placing the rules accordingly.
edit:
as your problem is caused by a plugin, which inserts a row automatically at the end, you can simply use :nth-last-child(2) to match the second-last element. (Note however that Browser-support for nth-last-child is slightly worse than last-child)
You can make a rule which will be only if tr is first-child and last-child at the same time, and this table tbody tr:first-child:last-child td add to the same styles as table tbody tr:last-child td. It will gonna look like this:
table tbody tr:last-child td,
table tbody tr:first-child:last-child td{
padding-top: 7px;
border-bottom: 0;
}
Here seems to work :) -
http://jsfiddle.net/HjZU4/
I use the following CSS to apply a top border to the last-child row of various tables:
.mytabs tr:last-child {
border-top:1px solid #000;
font-weight:bold;}
Now what I need to do is to override this style for one particular table. How can I override this style in one specific instance? Thanks.
You can wrap it a custom div id name example <div id="customFormat"></div> or give the table an id <table id="customFormat"></table>
In CSS, you can specify the custom styling just for that 1 table.
#customFormat {
border-bottom: 1px solid rgba(69,54,37,0.2);
}
Give a class specific table or to the last row of specific table and apply style
table.<specific_table> tr:last-child {
...your style
}
or
.mytabs tr.<specific_row> {
..your style}