CODEWITHSUNDEEP
htmlcss
user3753413
user3753413

Reputation: 83

Removing top border from html table cells

I am in the initial stages of building a site with a table that will feature on many of the pages. I have successfully styled the table as I would like with the exception of a gray border at the top of every cell. I just can't seem to get rid of it.

[The site is: http://www.randysrides.com/1970-chevrolet-camaro/][1]

The HTML for the table is as follows:

<div class="spec_table">
<table>
<tbody>
<tr>
<td><strong>Engine:</strong> Wagner LS-3 (603 hp)</td>
</tr>
<tr>
<td><strong>Transmission:</strong> Bowler Tremec 5-speed</td>
</tr>
<tr>
<td><strong>Exhaust:</strong> Flowmaster Super 44 Mufflers</td>
</tr>
<tr>
<td><strong>Ignition: </strong>Crane</td>
</tr>
<tr>
<td><strong>Radiator: </strong>Be Cool</td>
</tr>
<tr>
<td><strong>Rear End: </strong>GM 12-bolt</td>
</tr>
<tr>
<td><strong>Suspension: </strong>AVCO/JME</td>
</tr>
<tr>
<td><strong>Brakes: </strong>Willwood</td>
</tr>
<tr>
<td><strong>Wheels: </strong>Billet Specialties</td>
</tr>
<tr>
<td><strong>Paint:</strong> BASF Waterborne “Grinch Green”</td>
</tr>
<tr>
<td><strong>Interior: </strong>Mark Millbrandt</td>
</tr>
<tr>
<td><strong>Seats: </strong>Recaro</td>
</tr>
<tr>
<td><strong>Sound System: </strong>Alpine</td>
</tr>
</tbody>
</table>
</div>

I then have the following CSS:

.spec_table {width: 100%; max-width: 350px; margin-top: -31px;}
.spec_table table {margin-left: 0px;border-collapse:collapse;border: 0;}
.spec_table tr {border-left: 2px solid rgba(38,201,255,1);}
.spec_table td {margin-left: -20px; font-size: .9em; line-height: 1.1em;}

I just can't seem to get rid of the light gray border at the top of every cell.

Any help would be greatly appreciated.

Thank you, Jared

Upvotes: 6

Views: 50679

Answers (3)

Abhishek Batra
Abhishek Batra

Reputation: 1599

You have a style for border present in your style.css

.entry-content tr td { border-top: 1px solid #eee; padding: 6px 24px; }

You need to override this style

Add this in your CSS

.spec_table td {
margin-left: -20px;
font-size: .9em;
line-height: 1.1em;
border-top: none !important;
}

Upvotes: 13

HeyImArt
HeyImArt

Reputation: 538

Add this into your CSS

.entry-content tr:first-child td:first-child {
border-top: none;
}

This uses pseudo elements to target the first table tr, to the first table td to then have no border-top.

Upvotes: 0

Pricey
Pricey

Reputation: 5929

Your website link shows where the top border is coming from

.entry-content tr td { border-top: 1px solid #eee; padding: 6px 24px; }

Remove or override this selector so that there is no top border.

This bit of CSS was not in your example code, so presumably it's something you werent expecting to be inherited by your table?

Also your link has some extra stuff at the end so wasn't working.. but I found the page anyway.

Upvotes: 1

Related Questions