Html HTML5 中的表格行边框没有间隙
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11315070/
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
Table row borders in HTML5 without gaps
提问by Nick
This seems trivial enough, but I can't seem to stumble upon the answer.
这似乎微不足道，但我似乎无法偶然发现答案。
I want to have lines separating my rows in an HTML table, and nothing more. Simple enough, right?
我想在 HTML 表中用行分隔我的行，仅此而已。够简单了吧？
Some Googling brought me upon the table attribute rules, but apparently this isn't supported in HTML5.
一些谷歌搜索给我带来了 table 属性rules，但显然HTML5 不支持。
So I searched deeper into CSS and realized I could put borders around the tr's, right? Well no, not only does that not work but many SO threads| assured me its a bad idea.
所以我更深入地研究 CSS 并意识到我可以在tr's周围放置边框，对吗？好吧，不，这不仅不起作用，而且还有许多 SO 线程| 向我保证这是一个坏主意。
Logically I played with theirsolutions, which involved different combinations of tr { border-bottom ..., but I always end up with this tiny, obnoxious gap. What gap? There's about a pixel or two gap between the two td's (where a line separating columns would be). This may not seem like a big deal, but it seems unnecessary and I can't stop noticing it. For whatever reason however, it doesn't appear in jsfiddle, so I suggest trying this in notepad and opening it in the browser.
从逻辑上讲，我使用了他们的解决方案，其中涉及 的不同组合tr { border-bottom ...，但我总是以这种微小的、令人讨厌的差距告终。什么差距？两者之间大约有一个或两个像素的间隙td（分隔列的线所在的位置）。这可能看起来没什么大不了的，但似乎没有必要，我无法停止注意到它。然而，无论出于何种原因，它都没有出现在 jsfiddle 中，所以我建议在记事本中尝试并在浏览器中打开它。
Am I making a silly mistake? Is it a typo? Just my computer? Any help would be greatly appreciated... I've been staring at this for too long.
我犯了一个愚蠢的错误吗？这是一个错字吗？只有我的电脑吗？任何帮助将不胜感激......我一直盯着这个太久了。
Here's my test file that I've been mostly testing in Chrome and Android. It really needs to work in both, as this will also run in a Phonegap app that renders HTML5 in the phone browser.
这是我主要在 Chrome 和 Android 中测试的测试文件。它确实需要在两者中工作，因为这也将在 Phonegap 应用程序中运行，该应用程序在手机浏览器中呈现 HTML5。
<html>
<head>
<style>
td, th {
border-bottom: 1px solid black !important;
}
</style>
</head>
<body>
<table>
<tr>
<th>Item</th>
<th>Aisle</th>
</tr>
<tr>
<td>Cookies</td>
<td>2</td>
</tr>
<tr>
<td>Crackers</td>
<td>6</td>
</tr>
<tr>
<td>Milk</td>
<td>8</td>
</tr>
<tr>
<td>Cereal</td>
<td>2</td>
</tr>
</table>
</body>
</html>
回答by Hymanwanders
table {
border-spacing: 0;
border-collapse: collapse;
}
See if those help you out. Most browsers default to having a bit of padding between cells (remember the ol' HTML attribute cellspacing?). This will remove that.
看看这些对你有没有帮助。大多数浏览器默认在单元格之间有一些填充（还记得 ol' HTML 属性cellspacing吗？）。这将删除它。
