12

これは些細なことのように思えますが、答えにつまずくようには見えません。

HTML テーブルの行を区切る線が必要です。それ以上は必要ありません。簡単ですよね？

一部のグーグルで table 属性を見つけましたrulesが、どうやらこれは HTML5 ではサポートされていません。

そこで、CSS をさらに詳しく調べたところ、 の周りに境界線を配置できることに気付きましたよtrね? いいえ、それが機能しないだけでなく、多くの SO スレッド| 悪い考えだと私に保証した。

論理的には、さまざまな組み合わせのtr { border-bottom .... 何のギャップ？2 つtdの の間には約 1 ピクセルまたは 2 ピクセルのギャップがあります (列を区切る線がある場所)。これは大したことではないように思えるかもしれませんが、不要なようで、気になって仕方がありません。ただし、何らかの理由でjsfiddleには表示されないため、これをメモ帳で試してブラウザで開くことをお勧めします。

私はばかげた間違いをしていますか？タイプミスですか？私のパソコンだけ？どんな助けでも大歓迎です...私はこれを長い間見つめてきました。

これは、主に Chrome と Android でテストしてきたテスト ファイルです。これは、電話ブラウザーで HTML5 をレンダリングする Phonegap アプリでも実行されるため、実際には両方で動作する必要があります。

<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;
    }

それらがあなたを助けるかどうか見てください。ほとんどのブラウザは、デフォルトでセル間に若干のパディングを設定しています (古い HTML 属性を覚えていますcellspacingか?)。これはそれを取り除きます。

于 2012-07-03T16:20:53.080 に答える