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/
Related
I have an HTML table with no id or class definitions and I'm trying to make it have no border.
I'm inserting the table into a page that calls other stylesheets that might have definitions for tables, but I'm adding the following right before the table that should remove all previous possible classes:
table, th, tr, td {
border: 0px;!important
border-collapse: collapse;!important
border:none;!important
outline:none;!important
}
and yet the table border does not go away... how can I tackle this?
Your code is almost correct. You need to have the !important tag before the semicolon. Not after it.
Example:
table, th, tr, td {
border: 0px !important;
border-collapse: collapse !important;
border:none !important;
outline:none !important;
}
That will get rid of the border, but just also note that td and th elements also have 1px of padding by default as well. So going padding: 0px !important; in the code example above will remove it.
Try !important keyword before semicolon.
table, th, tr, td {
border: none !important;
outline: none !important;
};
Depending on how your application is built (mainly in terms of order of CSS), you may not even need the !important; property. Remember, order of CSS matters, so regardless, you should make sure that the styles you intend to have aren't overwritten later on.
Right now your CSS contains syntax errors. Your semicolon is in the wrong place. The smicolon is used to close the arguments and should therefore be at the end of the line.
This is how your CSS should look like:
table, th, tr, td {
border: 0px !important;
border-collapse: collapse !important;
border:none !important;
outline:none !important;
}
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
How can I use a CSS selector that will always catch the last row of a table and apply a rule to the last division, regardless if it is a TD or a TH, but not altering the last TH in the table.
My current rule only applies to if it is a TD, and all ways that I've found to make the TH round, it would round even if there's more TDs in it.
.tabGeral tr:first-child th:first-child {
border-top-left-radius:14px;
}
.tabGeral tr:first-child th:last-child {
border-top-right-radius:14px;
}
.tabGeral tr:last-child td:last-child {
border-bottom-right-radius:14px;
}
.tabGeral tr:last-child td:first-child{
border-bottom-left-radius:14px;
}
Top two are the desired result, the two on the bottom is what I'm achieving
JSFiddle: https://jsfiddle.net/rd48cfw8/3/
The two dark green are THs, the light colored green is a TD, I need them to be TH and TD because of table sorter.
If I use only tr:last-child td:first-child, the second table isn't achieved, if I use only tr:last-child th:first-child, the first table isn't achieved, if I use a combination of both, I get the fourth table, not desired.
to get the second last table row you would use
tr:nth-last-child(2) {}
You could then style the td with
This selects from the rear first so
tr:nth-last-child(1) {}
Would be the very last child and so on.
You can style the td in the second last tr as such
tr:nth-last-child(2) td {
(whatever styling you want.)
}
UPDATE:
Here is a fiddle I fixed it with:
.tabGeral:last-child tr:last-child th {
-webkit-border-bottom-right-radius: 9px;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomright: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-right-radius: 9px;
border-bottom-left-radius: 9px;
}
JSFIDDLE
Why not use overflow hidden on your table so that it cuts off the border-radius
I have a table and I want to style at tr level. This does not work on IE7 if I apply the style directly to the tr.
What's the best way to go about styling the table so I get a line across all rows but have no line at the very top or at the very bottom.
So basically, the table should look something like this
col1 col2 col3
--------------
col1 col2 col3
--------------
col1 col2 col3
--------------
col1 col2 col3
You can do this without the :last-child selector, in a way that is also compatible with IE7. And of course without JavaScript:
table tr + tr td {
border-top: 1px black solid;
}
Actually you are using the top border to draw a line, taking advantage of the fact that the tr + tr selector will match all rows except the first one.
See it in action.
To get a border on the bottom of each row:
table tr td {
border-bottom: 1px solid #000;
}
Then you would need to use some javascript to change the style of the last one, or use css which is probably not supported in IE6/7
table tr:last-child td {
border-bottom: none;
}
example: http://jsbin.com/ezolur
Use CSS2 selectors:
table#mytable tr{
border-bottom:1px solid black;
}
table#mytable tr:last-child{
border-bottom:none;
}
Try:
<tr>
<td colspan="3"><hr/></td></tr>
you can use the last-child selector:
have a look at this fiddle:
http://jsfiddle.net/SGfQy/
EDIT:
can you change the html of your table, you could put your first row in the thead, and the rest of your rows in the tbody, and then use
table tbody tr td{
border-top:1px solid red;
}
updated fiddle:
http://jsfiddle.net/SGfQy/1/
I think a td not within a table probably won't validate as HTML or XHTML and therefore the behavior is not well defined, so there probably is no practical use of td without table.
So in CSS, the table in
table td { padding: 0 2em }
is really not need, as td must be inside a table, isn't it true?
(Update: table td occurs such as in Sass, where programmers probably write style such as
table:
background: #fff
td:
border: 1px solid #000
and it will get compiled to table td for the td part)
The only difference is that table gives the selector higher specificity => rules in table td selector will always override rules in td selector.
No, it is not needed.
This, however, is why people do it:
table#tps_report td{ padding: 0 2em }
And then table is left as an orphan when it has no id purely out of habit. I am sure it also makes the task easier for the CSS+DOM parser.
It should not be necessary.
td { padding: 0 2em }
Just using TD will be more efficient as well not only in bytes but also in the application of the CSS rules to the markup.
Yeah td can only occur within a table element so styling via:
td { padding: 0em 2em; }
Is fine :)
This also applies to form and list tags (as well as others).
Typing:
form input { width: 50px; color:red; }
ul li { padding:5px 0; }
is the same as:
input { width: 50px; color:red; }
li { padding:5px 0; }