从 html 表格单元格中删除顶部边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24290835/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Removing top border from html table cells
提问by user3753413
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]
[网站是：http: //www.randysrides.com/1970-chevrolet-camaro/][1 ]
The HTML for the table is as follows:
表格的 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>
I then have the following 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;}
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
谢谢你，贾里德
回答by Abhishek Batra
You have a style for border present in your style.css
你的 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
在你的 CSS 中添加这个
.spec_table td {
margin-left: -20px;
font-size: .9em;
line-height: 1.1em;
border-top: none !important;
}
回答by Pricey
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?
这段 CSS 不在您的示例代码中，所以大概您不希望表继承它？
Also your link has some extra stuff at the end so wasn't working.. but I found the page anyway.
此外，您的链接最后还有一些额外的内容，因此无法正常工作.. 但我还是找到了该页面。
回答by HeyImArt
Add this into your CSS
将此添加到您的 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.
这使用伪元素将第一个表格 tr 定位到第一个表格 td，然后没有边框顶部。
