HTML5中的表格行边框没有间隙答案

【问题标题】：Table row borders in HTML5 without gapsHTML5中的表格行边框没有间隙
【发布时间】：2013-06-23 14:42:54
【问题描述】：

这似乎微不足道，但我似乎无法找到答案。

我想在 HTML 表格中用线条分隔我的行，仅此而已。很简单，对吧？

一些谷歌搜索让我发现了表格属性rules，但显然this isn't supported in HTML5。

所以我深入研究了 CSS 并意识到我可以在 tr 周围设置边框，对吧？好吧，不，这不仅不起作用，而且many SO threads | assured me its a bad idea。

从逻辑上讲，我使用了他们的解决方案，其中涉及tr { border-bottom ... 的不同组合，但我总是以这个微小的、令人讨厌的差距告终。什么差距？两个td 之间大约有一个或两个像素的间隙（分隔列的行将是）。这似乎没什么大不了的，但似乎没有必要，我无法停止注意到它。但是无论出于何种原因，它都没有出现在 jsfiddle 中，所以我建议在记事本中尝试这个并在浏览器中打开它。

我犯了一个愚蠢的错误吗？是错字吗？只是我的电脑？任何帮助将不胜感激......我已经盯着这个太久了。

这是我在 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>

【问题讨论】：

标签： css html

【解决方案1】：

    table {
       border-spacing: 0;
       border-collapse: collapse;
    }

看看这些对你有没有帮助。大多数浏览器默认在单元格之间有一点填充（还记得 ol' HTML 属性 cellspacing 吗？）。这将删除它。

【讨论】：

border-spacing 做到了。哦，CSS...谢谢！
只是为了强调后代，因为它最初并不适合我。请注意，这些属性应用于table 元素，而不是td 元素！