CODEWITHSUNDEEP
htmlcss
Brendan
Brendan

Reputation: 175

Remove border from first TD in table

My current table looks like this:

Current Table

I want to remove the border from the first two TD's/TH's so that it looks like this:

What I want from Table

(The second image was modified in Paint to show what I'd like to achieve)

The only styling I'm currently using is:

table 
{ 
    border-collapse:collapse; 
}

Because without it, my Table looks really bad like this:

enter image description here

Does anyone know how to achieve what I want? I've looked around, and tried applying different code snippets here and there but nothing seems to give me what I want. Thanks for your time.

EDIT

I didn't think to add my Table Markup because I was sure the problem wasn't coming from there, I literately only had one line of CSS and nothing else, but it was because of the <table border="1"> which made it so that none of my CSS snippets I tried worked.

Upvotes: 0

Views: 5686

Answers (3)

Mr_Green
Mr_Green

Reputation: 41832

Try this:

table  tr:first-child > th:first-child, table  tr:first-child > th:first-child + th{ 
    border:none; 
}

If you are not sure whether you are using th then also keep the below css:

table  tr:first-child > td:first-child, table  tr:first-child > td:first-child + td,
table  tr:first-child > th:first-child, table  tr:first-child > th:first-child + th {
     border: none;
}

Working Fiddle

Upvotes: 1

ffflabs
ffflabs

Reputation: 17481

I made a fiddle so I'll post it anyway even if you already got working answers.

http://jsfiddle.net/amenadiel/rV7Yw/

.mytable tr:first-child td:nth-child(1), 
.mytable tr:first-child td:nth-child(2) {
    border:1px transparent;    
}

Upvotes: 3

Magus
Magus

Reputation: 15104

You can remove the border of the two th with this css :

table tr:first th:nth(1), table tr:first th:nth(2) {
    border: none;
}

Note that it may not work on some old Internet Explorer versions. Note too that you may replace th by td, depending of your html structure.

Upvotes: 3

Related Questions