web-dev-qa-db-ja.com

テーブル行のパディング

<html>
    <head>
        <title>Table Row Padding Issue</title>
        <style type="text/css">
            tr {
                padding: 20px;
            }
        </style>
    </head>
    <body>
        <table>
            <tbody>
                <tr>
                    <td>
                        <h2>Lorem Ipsum</h2>
                        <p>Fusce sodales lorem nec magna iaculis a fermentum lacus facilisis. Curabitur sodales risus sit amet
                        neque fringilla feugiat. Ut tellus nulla, bibendum at faucibus ut, convallis eget neque. In hac habitasse 
                        platea dictumst. Nullam elit enim, gravida eu blandit ut, pellentesque nec turpis. Proin faucibus, sem sed 
                        tempor auctor, ipsum velit pellentesque lorem, ut semper lorem eros ac eros. Vivamus mi urna, tempus vitae 
                        mattis eget, pretium sit amet sapien. Curabitur viverra lacus non tortor luctus vitae euismod purus 
                        hendrerit. Praesent ut venenatis eros. Nulla a ligula erat. Mauris lobortis tempus nulla non 
                        scelerisque.</p>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

パディングは次のようになります。内部のtdがどのように影響を受けないかを確認してください。解決策は何ですか？ Table Row Padding Issue

htmlcsshtml-tablerowpadding
65
Spencer

トリックはtd要素にパディングを与えることですが、最初の例外を作成します（はい、それはハックですが、時にはブラウザーのルールに従って遊ぶ必要があります）：

td {
  padding-top:20px;
  padding-bottom:20px;
  padding-right:20px;   
}

td:first-child {
  padding-left:20px;
  padding-right:0;
}

最初の子は比較的よくサポートされています： https://developer.mozilla.org/en-US/docs/CSS/:first-child

tr:first-child tdを使用することにより、水平方向のパディングに同じ推論を使用できます。

または、 not演算子 を使用して最初の列を除外します。ただし、これに対するサポートは現時点ではあまり良くありません。

td:not(:first-child) {
  padding-top:20px;
  padding-bottom:20px;
  padding-right:20px;       
}
92
Joeri Hendrickx

CSS 1 および CSS 2 仕様では、<tr>を含むすべての要素でパディングが利用できました。ただし、 CSS 2.1 および CSS 仕様では、テーブル行（<tr>）のパディングのサポートが削除されました。この迷惑な変更の背後にある理由は、マージンプロパティと他のいくつかのテーブル要素（ヘッダー、フッター、列）にも影響を与えることはありません。

更新：2015年2月、 このスレッド[email protected]メーリングリストで、テーブル行のパディングと境界線のサポートの追加について説明しました。これにより、テーブル行およびテーブル列要素にも標準ボックスモデルが適用されます。 そのような例 が許可されます。スレッドは、CSS標準にはテーブル行のパディングサポートが存在しないことを示唆しているようです。複雑なレイアウトエンジンがあるためです。 2014年9月30日 Editor's Draft CSSの基本的なボックスモデルでは、テーブル行とテーブル列要素を含むすべての要素にパディングと境界線のプロパティが存在します。最終的にW3Cの推奨事項になった場合、html + cssの例は最終的にブラウザーで意図したとおりに機能する可能性があります。

16
Futal

tdパディングを与える

6
Moin Zaman

オプション1

次のように、行（tr）に透明な境界線を追加することでも解決できます。

HTML

<table>
    <tr> 
         <td>1</td>
    </tr>
    <tr> 
         <td>2</td>
    </tr>
</table>

CSS

tr {
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

チャームのように機能しますが、規則的な境界線が必要な場合、この方法は悲しいことに機能しません。

オプション2

行はセルをグループ化する方法として機能するため、これを行う正しい方法は、

table {
    border-collapse: inherit;
    border-spacing: 0 10px;
}
3
Karl Johan Vallner

これは非常に古い投稿ですが、最近直面した同様の問題の解決策を投稿すべきだと思いました。

回答：tr要素をblock要素として表示することでこの問題を解決しました。つまり、CSSを指定するdisplay：block = tr要素の場合。これは、以下のコードサンプルで確認できます。

<style>
  tr {
    display: block;
    padding-bottom: 20px;
  }
  table {
    border: 1px solid red;
  }
</style>
<table>
  <tbody>
    <tr>
      <td>
        <h2>Lorem Ipsum</h2>
        <p>Fusce sodales lorem nec magna iaculis a fermentum lacus facilisis. Curabitur sodales risus sit amet neque fringilla feugiat. Ut tellus nulla, bibendum at faucibus ut, convallis eget neque. In hac habitasse platea dictumst. Nullam elit enim, gravida
          eu blandit ut, pellentesque nec turpis. Proin faucibus, sem sed tempor auctor, ipsum velit pellentesque lorem, ut semper lorem eros ac eros. Vivamus mi urna, tempus vitae mattis eget, pretium sit amet sapien. Curabitur viverra lacus non tortor
          luctus vitae euismod purus hendrerit. Praesent ut venenatis eros. Nulla a ligula erat. Mauris lobortis tempus nulla non scelerisque.
        </p>
      </td>
    </tr>
  </tbody>
</table>
<br>
<br>This TEXT IS BELOW and OUTSIDE the TABLE element. NOTICE how the red table border is pushed down below the end of paragraph due to bottom padding being specified for the tr element. The key point here is that the tr element must be displayed as a block
in order for padding to apply at the tr level.
0
Sunil

このスタイルをテーブルに追加するだけです。

table {
    border-spacing: 15px;
}
0
Ifesinachi Bryan

次のコードをCSSファイルに書き込むだけです

td{
  padding: 10px;
{
0
MD.JULHAS HOSSAIN MOHON