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
Related
I am trying to use css bootstrap framework in my project
I am using table with the following classes table table-bordered table-striped
I want to remove the borders from all the column except the first column.
Here is my table in a fiddler https://jsfiddle.net/8yf0v3xt/16/
Basically in this screenshot, I only want to remove the vertical borders in the red rectangle border.
<table class="table table-bordered table-striped">
<thead>
<tr><th></th><th></th>...</tr>
</thead>
<tbody>
<tr><th score="row"><th></td><td></td>...</tr>
...
</tbody>
</table>
EDITED
Or, if I remove the table-bordered class, how can I only add a column on the very first column? something like this screenshot
How can I do that?
You need to look into the :first-child pseudo selector. Link here
The :first-child selector is used to select the specified selector, only if it is the first child of its parent.
You can select all of the td elements and remove the border from them all with:
table tr td { border: none; }
And then to add unique styling to just the first element:
table tr td:first-child { border: default; } /* Or whatever styling you may wish..
The same can be done with :last-child which will of course select the last element in oppose to the first.
And if you need to be even more specific again.. You can use :nth-child(x) where x is the number of the element that you wanted.
Fiddle: https://jsfiddle.net/8yf0v3xt/18/
UPDATE
Fiddle: https://jsfiddle.net/8yf0v3xt/22/
I've removed the .table-bordered class and added the following CSS:
table { border: 1px solid #ddd; }
table.table tr, table.table tr th, table.table tr td { border: none; }
table.table tr th:first-child, table.table tr td:first-child { border: 1px solid #ddd; }
I have used the pseudo selectors like explained above to add styling to just the first column.
Not sure how to go about this piece of code (CSS):
td {
border-bottom: solid 2px lightgray;
}
(featured in the jsfiddle below), to not function but only for the first button click. The reason behind this is because then there would be 2 bottom borders.
http://jsfiddle.net/julianbuscema/yqh2rqh0/38/
Pretty much on the second button click I want the code to be activated
In addition to the style you already have in your question, add :last-child to tr and then style the last td based on that.
tr:last-child td {
border: none!important;
}
Here's a fiddle: http://jsfiddle.net/8a0m19z7/
Hi I would like to select only the first <td> (td with the text "label") of every row in a table, if you have a simple html like:
<table>
<tr><td>label</td> <td>value</td></tr>
<tr><td>label</td> <td>value</td></tr>
<tr><td>label</td> <td>value</td></tr>
</table>
I would like to assign for example a width of 10% only to the first <td></td> group with selector I DONT want to use a class.
I have tried the follow selectors:
table.widget tr:first-child td{
width:10%;
border:0;
}
But that selector only will pick the first td of the first tr no all the TD's so I tried
table.widget tr td:first-child{
max-width:10%;
}
Of course what I got is the selection of the first child of the TD. NOT the td itself
it's possible to accomplishing this?
Your second selector is actually correct:
http://tinker.io/40f64
table.widget tr td:first-child {
background: orange;
}
To select the first child of each td, the selector would be like so:
table.widget tr td :first-child { /* note the space after the td */
// styles
}
It should be noted, however, that the OP's sample table does not have the widget class applied to it.
If your table is expressing a collection of key/value pairs, placing your label text within a th might be more appropriate:
http://tinker.io/40f64/1
table.widget th {
background: orange;
}
<table class="widget">
<tr><th>label</th> <td>value</td></tr>
<tr><th>label</th> <td>value</td></tr>
<tr><th>label</th> <td>value</td></tr>
</table>
One way:
table tr td:first-of-type {
background: lemonchiffon;
}
http://jsfiddle.net/PRrq5/2/
Try this:
table tr td:first-child { color: red; }
Fiddle: http://jsfiddle.net/74MFH/1/
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 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/