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/
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.
Look at this fiddle: http://jsfiddle.net/czz2ejfw/1
Style for my table:
td {
color: #669;
}
tbody tr:hover {
color: red;
}
The text color should be red when we hover. In fact, if you look at developer tools you see that red should be applied. But incredibly, it displays as #669. WTH?
This is consistent across Firefox, Chrome, Safari, and Opera.
It isn't more specific. It matches a different element.
td { color: #669; } overrides the default stylesheet (which is probably something like td { color: inherit; }) because author stylesheets override browser stylesheets.
If you want to match the td when the tr is hovered, then you need to mention the td in the selector (e.g. with a descendant combinator).
tbody tr:hover td {}
<tr> is getting the color:red; but there is nothing there to be styled red.
Instead you would need to do this, which applies red to all <td> cells that are children of the parent <tr>:
tbody tr:hover {
background-color: yellow;
}
tbody tr:hover td {
color: red;
}
JS Fiddle Demo
As actually already said in a comment, the td is a child of the tr, so although the background of the tr changes, if you can't see it anywhere because none of the td's are transparent you won't get anywhere. The correct solution thus is to either make the td's transparent (default) and instead style the tr's always, or use tr:hover td{} to override the styles of the td instead of styling the tr.
Update that part of your CSS to this and it will work:
tbody tr:hover {
background-color: yellow;
}
tbody tr:hover td{
color: red;
}
Red is higher priority in your version because it is specific for td the tbody tr is not that specific
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 created a page which is a login portal to three separate websites. On this page, I have displayed the three login portals to said websites. I am trying to style it all with css and as few classes as possible (I need to fine tune my css skills).
What I have created is a table with three rows and two columns called loginPortals:
<table class="loginPortals">
<tbody>
<tr>
<td>Picture 1</td>
<td>Login form 1</td>
</tr>
<tr>
<td>Picture 2</td>
<td>Login form 2</td>
</tr>
<tr>
<td>Picture 3</td>
<td>Login form 2</td>
</tr>
</tbody>
</table>
I've only just begun the styling of the table, so it's very incomplete, however I'm struggling already. This is simplified, because I don't know exactly how it's going to look. Basically though, I want a border of some sort appearing between each row. The following doesn't quite achieve this as I had wanted:
.loginPortals{
width:100%;
}
.loginPortals tbody:first-child td{
border-top:1px solid #000;
}
.loginPortals tbody tr td{
border-bottom:1px solid #000;
padding:1em 0;
}
The first-child selector isn't working as I had thought it would. It is applying the top border to all the cells in all the rows. This is causing the line thickness to double in the middle of the rows.
How do I fix this so that the top border is only applied to the top row without creating extra classes or applying any inline style.
Thank you!
Joe
Your table borders need to be set to collapse:
.loginPortals{
width:100%;
border-collapse: collapse;
}
You can then omit the :first-child rule and just apply top and bottom borders for all your rows:
.loginPortals tbody tr td{
border-top:1px solid #000;
border-bottom:1px solid #000;
padding:1em 0;
}
Also, just for your information, this selector:
.loginPortals tbody:first-child td
Means:
Select any td element
within a tbody
that is the first child of its parent.
And not:
Select any td element
within the first child of a tbody.
So since the tbody is the first and only child of .loginPortals, all the td elements in all their tr parents will be selected. See this answer for a visual explanation. You probably wanted this selector:
.loginPortals tbody tr:first-child td
But that's not necessary because all you have to do is collapse your table borders.
If I understand correctly, you have 3 forms and only want two lines - that's what I took from I want a border of some sort appearing between each row if that's the case, try this.
.loginPortals tr:first-child td{
border-top:none;
}
.loginPortals tbody tr td{
border-top:1px solid #000;
padding:1em 0;
}
http://jsfiddle.net/u4v3Z/
I believe this would work...
td {border-top:1px solid #000;}
First of all, if you want to improve your CSS skills you should immediately stop using tables for layout.
Second, the :first-child pseudo class affects elements that are the first child of their parents. So since you only have one tbody element and it is the first child of the table writing tbody or tbody:first-child will yield the same results.
Edit: I think what you might be after here is tr:first-child td (you only want the table cells in the first table row to have a top border).
To solve your problem you could just go with border-bottom on all tds, unless you need a border in the top as well in which case you could set that border on the actual table or you could give all the tds a border-top and border-bottom. This of course renders a double border as you describe, but you can make the borders of a table collapse using border-collapse: collapse.
So in short: table {border-collapse: collapse}. But don't use tables for layout.