12

这似乎微不足道，但我似乎无法偶然发现答案。

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

一些谷歌搜索给我带来了 table 属性rules，但显然HTML5 不支持。

所以我更深入地研究了 CSS 并意识到我可以在tr's 周围设置边框，对吧？好吧，不，这不仅不起作用，而且还有很多 SO 线程| 向我保证这是个坏主意。

从逻辑上讲，我使用了他们的解决方案，其中涉及 的不同组合tr { border-bottom ...，但我总是以这个微小的、令人讨厌的差距告终。什么差距？两个 's 之间大约有一个像素或两个间隙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>
4

1 回答 1

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

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

于 2012-07-03T16:20:53.080 回答