CSS境界が等間隔である

Question

私の問題を解決するための非常に基本的な方法があると確信しています。残念ながら、私はフロントエンドの開発には本当に不慣れですが、私は自分の問題を解決しなければなりません。手短に言えば、私のテーブルにはいくつかのダイナミックな枠がありますが、各枠の間にはスペースが必要です。

は、今では

ただし、以下の画像のように見える、それは私のコードは以下の通りです

画像

以下のようにする必要があります。 CSSを変更するとどうすればいいですか？

.bg { 
 
    width: 100%; 
 
    padding-left: 2px; 
 
    padding-right: 2px; 
 
} 
 
.chart { 
 
    border: solid 1px #e31515; 
 
    color: #e31515; 
 
    width: 100%; 
 
    position: absolute; 
 
    overflow: hidden; 
 
}

<meta charset="utf-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<span style="overflow: hidden;left: 550px; height: 150px; width: 250px; position: absolute; "> <div > 
 
<table cellpadding="2" border="1"> 
 
    <tbody> 
 
    <tr> 
 
     <td style="overflow: hidden; border-top: #e9e8e8 1px solid; border-right: 0px; width: 1%; white-space: nowrap; border-bottom: #e9e8e8 1px solid; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; padding-right: 0px; background-color: transparent"> 
 
     <div class="bg" style="height: 129px"> 
 
      <div class="chart" style="height: 14px; margin-top: 115px"></div> 
 
     </div> 
 
     </td> 
 
     <td style="overflow: hidden; border-top: #e9e8e8 1px solid; border-right: 0px; width: 1%; white-space: nowrap; border-bottom: #e9e8e8 1px solid; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; padding-right: 0px; background-color: transparent"> 
 
     <div class="bg" style="height: 129px"> 
 
      <div class="chart" style=" height: 14px; margin-top: 115px"></div> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
</div> 
 
</span> 
 
<span style="overflow: hidden;left: 150px; height: 150px; width: 250px; position: absolute; "> 
 
     <div > 
 
      <table cellpadding="2" border="1"> 
 
       <tbody> 
 
        <tr> 
 
         <td style="overflow: hidden; border-top: #e9e8e8 1px solid; border-right: 0px; width: 1%; white-space: nowrap; border-bottom: #e9e8e8 1px solid; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; padding-right: 0px; background-color: transparent" > 
 
          <div class="bg" style="height: 129px"> 
 
           <div class="chart" style="height: 14px; margin-top: 115px"></div> 
 
          </div> 
 
         </td> 
 
         <td style="overflow: hidden; border-top: #e9e8e8 1px solid; border-right: 0px; width: 1%; white-space: nowrap; border-bottom: #e9e8e8 1px solid; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; padding-right: 0px; background-color: transparent" > 
 
          <div class="bg" style="height: 129px"> 
 
           <div class="chart" style="height: 14px; margin-top: 115px"></div> 
 
          </div> 
 
         </td> 
 
         <td style="overflow: hidden; border-top: #e9e8e8 1px solid; border-right: 0px; width: 1%; white-space: nowrap; border-bottom: #e9e8e8 1px solid; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; padding-right: 0px; background-color: transparent" > 
 
          <div class="bg" style="height: 129px"> 
 
           <div class="chart" style="height: 14px; margin-top: 115px"></div> 
 
          </div> 
 
         </td> 
 
        </tr> 
 
       </tbody> 
 
      </table> 
 
     </div> 
 
     </span>

Answer 1

あなたはパディングを使用しています。代わりにmarginプロパティを使用する必要があります。ボックスモデルでは、ボックスの内側の内容を整列させるためにパディングが使用されます。しかし、スタイルを適用するので、それぞれのmargin-rightプロパティについて言及する必要があります。単純にpaddingをbgスタイルのmarginプロパティで置き換えます。

.bg { width: 100%; margin-left: 2px; margin-right: 2px; }

は、この情報がお役に立てば幸いです。この解決策が正しいことがわかったら、答えとしてマークしてください。

Answer 2

CSSのborder-spacingプロパティは、必要な処理を行います。ここ

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

例：http://www.w3schools.com/csSref/tryit.asp?filename=trycss_table_border-spacing