เพิ่มช่องว่างระหว่างเซลล์ (td) โดยใช้ css

ฉันกำลังพยายามเพิ่มตารางที่มีช่องว่างระหว่างเซลล์เนื่องจากสีพื้นหลังของเซลล์เป็นสีขาวและสีพื้นหลังของตารางเป็นสีน้ำเงินคุณสามารถเห็นได้อย่างง่ายดายว่าช่องว่างภายในและระยะขอบไม่ทำงาน (ฉันกำลังใช้กับtd) มันจะเพิ่มช่องว่างภายในเซลล์เท่านั้น

คุณต้องการborder-spacing:

<table style="border-spacing: 10px;">

หรือในบล็อก CSS บางแห่ง:

table {
  border-spacing: 10px;
}

ดูquirksmodeborder-spacingบน โปรดทราบborder-spacingว่าไม่ได้ทำงานบน IE7 และต่ำกว่า

table { 
  border-spacing: 10px; 
} 

สิ่งนี้ใช้ได้ผลสำหรับฉันเมื่อฉันลบออก

border-collapse: separate;

จากแท็กตารางของฉัน

เหมืองคือ:

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

พิจารณาการใช้cellspacingและcellpaddingแอตทริบิวต์สำหรับคุณสมบัติtableแท็กหรือborder-spacingcss

พารามิเตอร์ cellspacing (ระยะห่างระหว่างเซลล์) ของแท็ก TABLE คือสิ่งที่คุณต้องการอย่างแม่นยำ ข้อเสียคือเป็นค่าเดียวใช้ทั้ง x และ y คุณไม่สามารถเลือกระยะห่างหรือช่องว่างในแนวตั้ง / แนวนอนต่างกันได้ มีคุณสมบัติ CSS ด้วย แต่ไม่รองรับอย่างกว้างขวาง

สมมติว่าcellspcing/ cellpadding/ border-spacingคุณสมบัติไม่ทำงานคุณสามารถใช้รหัสดังต่อไปนี้

<div class="form-group">
  <table width="100%" cellspacing="2px" style="border-spacing: 10px;">
    <tr>                        
      <td width="47%">
        <input type="submit" class="form-control btn btn-info" id="submit" name="Submit" />
      </td>
      <td width="5%"></td>
      <td width="47%">
        <input type="reset" class="form-control btn btn-info" id="reset" name="Reset" />
      </td>
    </tr>
  </table>
</div>

ฉันพยายามและประสบความสำเร็จในขณะที่แยกปุ่มโดยใช้ความกว้างของตารางและทำให้ td ว่างเป็น 2 หรือ 1% มันไม่ได้แตกต่างกันมากขึ้น

หากคุณต้องการแยกค่าสำหรับด้านข้างและด้านบน - ล่าง

<table style="border-spacing: 5px 10px;">