等間距的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

您正在使用的填充。相反，您需要使用保證金屬性。在盒子模型中，填充用於對齊盒子的內部內容。但是，由於您正在將樣式應用於該元素，因此您需要提及每個元素的保證金屬性。簡單地用bg樣式替換帶有邊距屬性的填充。

.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