Question

I would really appreciate some help.

I have a problem with html markup in asp.net, so, have to make workaround. For Firefox and Opera, everything is perfect, but Chrome on Safari still have one issue.

I want to make last <th> tag unbordered. Header <tr> line has “bordered” css class. Here is css part:

.bordered th
{
    border: 1px solid black;
}

.bordered th:last-child
{
    border: 0px none white;
    border-bottom: 0px none white;    
}

HTML markup:

`<table class="bordered" cellspacing="0" border="0" id="ctl00_body_gvTimeTable" style="border-collapse:collapse;">
    <tr style="border-width:0px;">
        <th scope="col">One</th>
        <th scope="col">Two</th>
        <th scope="col">Three</th>
        <th scope="col">&nbsp;</th>
    </tr>`

But still last <th> stays underlined. What’s the problem?

Answer 1

I checked this out in jsFiddle. I wasn’t able to see any problem in Chrome (version 15) nor Safari (version 5).

I made a slight adjustment to your CSS (changed your border values to zero – as suggested by Stack Overflow):

.bordered th { border: 1px solid black; }
.bordered th:last-child { border: 0; border-bottom: 0; }

Something to note, :last-child is a CSS3 selector. That means it will not work in IE8 or below (unless you are using Selectivizr or similar).