从html表单元格中删除上边框

Question

我是在建立一个具有表格的网站，将在许多页面上的功能的初始阶段。除了每个单元格顶部的灰色边框之外，我已经成功地按我希望的方式设置了表格的样式。我似乎就是摆脱不了它。

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

表格的HTML如下所示：

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

然后我有了下面的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;}

我似乎无法摆脱每个单元格顶部的浅灰色边框。

任何帮助都将不胜感激。

谢谢你，贾里德

Answer 1

您的style.css中有一个边框样式

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

您需要覆盖此样式

在你的CSS中添加这个

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

Answer 2

您的网站链接显示了顶部边框的来源

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

删除或覆盖此选择器，以便没有上边框。

这部分CSS没有出现在示例代码中，所以您可能不希望表继承它？

另外，你的链接在最后有一些额外的东西，所以不起作用..但我还是找到了那个页面。

Answer 3

将此代码添加到CSS中

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

这使用伪元素将第一个表tr指向第一个表td，然后没有边框顶部。