: last-child doesn't work in IE8
I am having difficulty with TH
last-child styles in IE8.
Please find a violin here. http://jsfiddle.net/archanabr05/yokLbocx/
The problem is this: I want to create a white border between the header cells, but avoid the last header cell.
So I used:
CSS
th:last-child {
border-right:none;
}
I know this doesn't work in IE8, do we have any solutions to get around this, jquery is fine with me too.
I don't have fixed columns all the time. So I can't style it based on a fixed number of cells.
source to share
use :first-child
- http://caniuse.com/#feat=css-sel2
.table{
border-spacing: 0;
border:2px solid #e5e5e5;
border-collapse: collapse;
}
tr th{
}
th{
padding:30px;
background:#e5e5e5;
border-left: 2px solid #fff;
}
th:first-child{
border-left: none;
}
td {
border-right: 2px solid #e5e5e5!important;
border-top: 1px solid #e5e5e5!important;
padding: 30px;
background:#fff
}
<table class="table">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Yes</td>
<td>Yes</td>
<td>No</td>
</tr>
</table>
source to share
You can use Selectivizr for this. Selectivizr is a utility that emulates CSS3 pseudo-classes for older browsers like I6 / 7/8
source to share
Another alternative :first-child
( which is a good compatible solution ) is to use an adjacent sibling selector (character +
and has excellent support ) with the opposite border. Then you will look like this:
.table{
border-spacing: 0;
border:2px solid #e5e5e5;
border-collapse: collapse;
}
tr th{
}
th{
padding:30px;
background:#e5e5e5;
}
th + th{
border-left:2px solid #fff;
}
td {
border-right: 2px solid #e5e5e5!important;
border-top: 1px solid #e5e5e5!important;
padding: 30px;
background:#fff
}
<table class="table">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Yes</td>
<td>Yes</td>
<td>No</td>
</tr>
</table>
source to share
You can do a simple hack.
Put the class name in the last th and write css it inside ie.css (which only loads in IE)
To load the CSS file only in IE, you can use conditionals like this.
CSS can be like this.
This way you don't need to download another third party jquery plugin to do the same.
source to share