0

テーブルの境界線から間隔/パディング/マージンを追加するにはどうすればよいですか?

次のように、テーブルの行間の間隔を狭くし、テーブルの境界線自体からの間隔/パディングを増やしたいと思います。

<table /*inner margin/padding = 50px */>
<tr /* margin = 2px */><td>Hello</td></tr>
<tr /* margin = 2px */><td>Hello</td></tr>
<tr /* margin = 2px */><td>Hello</td></tr>
</table>

私がする時：

 table border-collapse:separate; border-spacing: 10px;

行全体とボーダーからのパディングが増加します。テーブルの境界線からのパディングよりもはるかに狭い行間のパディングが必要です。言い換えれば、内側の行のパディングではなく、外側のパディングを増やしたいと思います。

4

1 に答える 1

2

これは、あなたの望むことですか？

HTML: 

<table>
  <tr>
    <th>No.</th>
    <th>Name</th>
    <th>Family</th>
    <th>Email Address</th>
  </tr>
  <tr>
    <td>1</td>
    <td>John</td>
    <td>Doe</td>
    <td>john@doe.com</td>
  </tr>
  <!-- So on -->
</table>

CSS: 

table {
  padding: 48px;              /* 48 + 2 = 50px */
  border-collapse: separate;  /*      |        */
  border-spacing: 2px;  /* <-----------        */
}

table, th, td {
  border: 1px solid black;
}

プロパティを使用border-spacingして、隣接するセルの境界線間の距離を指定し、プロパティpaddingを使用してテーブルとそのコンテンツの境界線の間にスペースを作成できます。

JSBin デモ

于 2013-08-22T20:47:01.957 に答える