CODEWITHSUNDEEP
jqueryhtmlcss
Archana
Archana

Reputation: 241

:last-child does not work in IE8

I am having difficulties in styling the TH last-child in IE8.

Please find the fiddle here. http://jsfiddle.net/archanabr05/yokLbocx/

The problem is: I want to create a white border between header cells, but avoid for the last header cell.

So I used:

CSS:

th:last-child {
 border-right:none;
}

I know this doesnot work in IE8, do we have any solution to go about it, jquery is also fine with me.

I do not have fixed columns all time. Therefore I cannot style based on fixed number of cells.

Upvotes: 3

Views: 79

Answers (5)

Joseph Marikle
Joseph Marikle

Reputation: 78530

Another alternative to :first-child (which is a nice compatible solution) is to use the adjacent sibling selector (the + symbol and it has excellent support) with the opposite border. You're code would then 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>

Upvotes: 1

Dmitriy
Dmitriy

Reputation: 4503

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>

Upvotes: 3

Avijit Kumar
Avijit Kumar

Reputation: 538

You can do a simple hack.

Put a class name in the last th and write css of it inside ie.css ( which loads only in IE )

To load a CSS file only in IE, you can use conditional statements like this.

<!--[if lte IE 9]>
    <link rel="stylesheet" href="./css/ie.css">
    <![endif]-->

The CSS can be like this.

th.last-child {
  border-right: none;
}

So in this way, you do not need to load another 3rd party jquery plugin to do the same.

Upvotes: 0

Alex Coloma
Alex Coloma

Reputation: 636

With jQuery:

 <script type="text/javascript">

    jQuery(document).ready(function () {

    $( "th:last" ).css(border-right: "none");

});
    </script>

Upvotes: 0

Mario Araque
Mario Araque

Reputation: 4572

You can use Selectivizr to do that. Selectivizr is a utility that emulate CSS3 pseudo-classes for old browsers like I6/7/8

Upvotes: 3

Related Questions