HTML5中的表行边框没有间隙

Nic*_*ick 11 css html5

这似乎微不足道,但我似乎无法绊倒答案.

我希望在HTML表格中将行分隔开来,仅此而已.很简单吧?

一些谷歌搜索带来了我的表属性rules,但显然这在HTML5中不受支持.

所以我深入研究了CSS并意识到我可以把边框放在周围tr,对吗?好吧不,这不仅不起作用,而且许多SO线程 | 向我保证这是一个坏主意.

从逻辑上讲,我玩他们的解决方案,其中涉及不同的组合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>
Run Code Online (Sandbox Code Playgroud)

jac*_*ers 27

    table {
       border-spacing: 0;
       border-collapse: collapse;
    }
Run Code Online (Sandbox Code Playgroud)

看看那些帮助你.大多数浏览器默认在单元格之间有一些填充(请记住ol'HTML属性cellspacing?).这将删除它.