Last-child selector with border still leaves th underlined

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?

I do not observe this problem in the latest versions of Chrome and Safari for OSX. — bookcasey, Nov 27 '11 at 19:09
Sorry, I can't show whole project, only one screen http://i27.fastpic.ru/big/2011/1127/ca/97d55867500ba95d28865b641e4f6bca.png — Johnny_D, Nov 27 '11 at 19:13
Or here is example http://codepaste.ru/8500/. Problem is that I can't modify HTML markup, it's asp.net. — Johnny_D, Nov 27 '11 at 19:20

score 0 · Answer 1 · answered Nov 27 '11 at 18:23

0

:last-child will select the last child element of the targeted parent (in this case, .bordered th). You'll need to use something like th:last-of-type.

answered Nov 27 '11 at 18:23

Damon Bauer

2,718
1
22
35

It's still affected by css, but I think it's Chrome bug, that it still remain bottom border line. – Johnny_D Nov 27 '11 at 18:42

score 0 · Answer 2 · answered Nov 27 '11 at 18:50

Try throwing it an !important this will override any previously given stylings, aswell as stylings that would override it later on.

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

.bordered th:last-child
{
    border: 0 !important;
    border-bottom: 0 !important;
}

score 0 · Accepted Answer · edited May 23 '17 at 12:03

0

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).

edited May 23 '17 at 12:03

Community

1
1

answered Nov 27 '11 at 19:48

w0lf42

508
6
19

It only appears if the next row is fully spanned, even if the row isn't bordered. – Johnny_D Dec 05 '11 at 13:56

Last-child selector with border still leaves th underlined

3 Answers3