Границы строк таблицы в HTML5 без пробелов

Это кажется достаточно тривиальным, но я не могу наткнуться на ответ.

Я хочу иметь строки, разделяющие мои строки в таблице HTML, и ничего больше. Достаточно просто, не так ли?

Некоторый Googling привлек меня к атрибуту table 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>

Ответ 1