从HTML表格单元格中删除顶部边框

Question

我正在构建一个包含表格的网站，并且这个表格会出现在很多页面上。我已经成功地将表格样式设置为我想要的样子，除了每个单元格顶部的灰色边框，我无法摆脱它。

[该网站是：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：

然后我有以下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;}

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

如果您能提供帮助，将不胜感激。

谢谢， Jared

- user3753413

---

你尝试过 border-top:none; 吗？还是将边框设置为背景颜色以使其不可见？此外，似乎以上代码并非导致问题的原因：http://jsfiddle.net/kJW2U/ - BuddhistBeast

没有任何顶部边框，可以在这里查看http://jsfiddle.net/uej9J/。看起来问题出在其他地方（在您的实际代码中），而不是您发布的代码中。 - King King

您的页面正在显示“页面未找到”，因此也没有提供实时示例。 - BuddhistBeast

我看到的唯一边框是左侧的蓝色边框。我也看到了“找不到页面”的消息，但如果我点击Camaro链接，就可以看到表格。http://codepen.io/anon/pen/kDEAC - user3542456

链接格式错误，因此附加了额外的内容。我进行了编辑以修复它，现在应该可以正确链接了。 - The_DemoCorgin

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

- Abhishek Batra

---

添加"border-top:"样式并使用!important正是我所需要的。非常感谢大家的帮助。我猜想"class"entry-content"的样式来自我的WordPress主题。这是我在StackOverflow上的第一篇文章，但我一定会回来并尝试做出贡献。 - user3753413

Answer 2

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

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

移除或覆盖此选择器，以便没有顶部边框。

这段CSS不在您的示例代码中，因此可能是您不希望表格继承的内容？

另外，您的链接末尾有一些额外的东西，所以无法使用...但我还是找到了页面。

- Pricey

Answer 3

将此代码添加到您的CSS中。

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

这个使用伪元素来定位第一个表格的tr，再定位到第一个表格的td，然后去掉它们的border-top。

- HeyImArt