How to apply the border spacing on table using CSS

Question

I currently have problem on my table which is I need to have a margin on my <th></th> tag I already test the border-spacing on w3school yes it works there however on my side the border-spacing of css is not working.

CSS Framework: SB-Admin2

Html5

Backend Framework: Laravel

W3School Output:

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

              <thead>
                <tr style="font-size:13px; text-align: center; ">
                 <th colspan="1"  style="border-left-color:white; border-right-color: white; border-top-color: white; border-bottom-color: white;"></th>
                  <th colspan="2" style="vertical-align:top; text-transform:uppercase; color:white; background-color: #8092AB;" class="flash_period_text_onchange">
                    2020
                  </th>

                  <th colspan="2" class="bg-gradient-success" style="vertical-align:top; color:white; background-color: #009700; position:relative;">TGT</th>

                  <th colspan="2" class="bg-gradient-dark"  style="vertical-align:top; color:white; background-color: #808080;">LY</th>

                  <th colspan="3" scope="colgroup" style="color:black;">Variance Vs Target</th>
                  <th colspan="3" scope="colgroup" style="color:black;">Variance Vs <?php echo $future=date('Y', strtotime('-1 year')); ?></th>
                </tr>
                <tr class="header_2nd_level">
                  <th style="border-left-color:white; border-right-color: white;"></th>
                  <th style="border-left-color:white; border-right-color: white;"></th>
                  <th style="border-left-color:white; border-right-color: white;"></th>
                  <th style="border-left-color:white; border-right-color: white;"></th>
                  <th style="border-left-color:white; border-right-color: white;"></th>
                  <th style="border-left-color:white; border-right-color: white;"></th>
                  <th style="border-left-color:white;"></th>
                  <th>amount</th>
                  <th>%</th>
                  <th>ppt</th>

                  <th>amount</th>
                  <th>%</th>
                  <th>ppt</th>

                </tr>
              </thead>
</table>

On my side output:

Note: This image code is same on the w3school

Hope someone encounter this. Thank you.

Answer 1

The border-spacing property doesn't work if the border-collapse = "collapse" for this add border-collapse = "separate" to your table.

Note: This property works only when border-collapse is separate.

Hope this might help you.