テーブル行のパディング

Question 1

<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がどのように影響を受けないかを確認してください。解決策は何ですか？テーブル行のパディングの問題

Question 2

秘訣は、td要素にパディングを付けることですが、最初の要素は例外とします（はい、それはハッキーですが、ブラウザーのルールに従ってプレイする必要がある場合があります）。

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

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

First-childは比較的よくサポートされています：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;       
}

Question 3

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

更新：2015年2月、メーリングリストのこのスレッドではwww-style@w3c.org、テーブル行のパディングと境界線のサポートの追加について説明しました。これにより、標準のボックスモデルがtable-row要素とtable-column要素にも適用されます。それはそのような例を許すでしょう。このスレッドは、複雑なレイアウトエンジンが含まれるため、CSS標準にはテーブル行のパディングサポートが存在しなかったことを示唆しているようです。2014年9月30日のCSS基本ボックスモデルの編集者ドラフトでは、table-row要素とtable-column要素を含むすべての要素にパディングとボーダーのプロパティが存在します。最終的にW3C勧告になった場合、html + cssの例は最終的にブラウザで意図したとおりに機能する可能性があります。

Question 4

tdパディングを与える

Question 5

オプション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;
}

Question 6

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

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

<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.

スニペットを展開

Question 7

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

table {
    border-spacing: 15px;
}