Question

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

我希望在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>

Answer 1

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

看看这些是否有助于你。大多数浏览器默认在单元格之间有一些填充（请记住ol'HTML属性cellspacing？）。这将删除它。

HTML5中的表行边框没有间隙

1 个答案: