如何在表格的某些列之間添加間距？

Question

我想要像這樣的表：

應該有C和d，d和E，以及F和G之間的間隙，但應該不會存在任何其他列之間的任何空間，例如A和B

這是我目前有：

的jsfiddle：https://jsfiddle.net/e33cbkh3/1/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
thead { 
 
background: orange; 
 
} 
 

 
th, td { 
 
text-align: center; 
 
border: none !important; 
 
}

<table class="table table-striped table-bordered table-hover"> 
 
    <thead> 
 
    <tr> 
 
     <th colspan="3"></th> 
 
     <th></th> 
 
     <th colspan="2"> XYZ </th> 
 
     <th></th> 
 
    </tr> 
 
    <tr> 
 
     <th>A</th> 
 
     <th>B</th> 
 
     <th>C</th> 
 
     <th>D</th> 
 
     <th>E</th> 
 
     <th>F</th> 
 
     <th>G</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     <td>7</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

最簡單的解決辦法是在您的表中的一些額外的空列：

HTML

<table class="table"> 
    <thead> 
    <tr> 
     <th colspan="3"></th> 
     <th class="space"></th> 
     <th></th> 
     <th class="space"></th> 
     <th colspan="2"> XYZ </th> 
     <th class="space"></th> 
     <th></th> 
    </tr> 
    <tr> 
     <th>A</th> 
     <th>B</th> 
     <th>C</th> 
     <th class="space"></th> 
     <th>D</th> 
     <th class="space"></th> 
     <th>E</th> 
     <th>F</th> 
     <th class="space"></th> 
     <th>G</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td class="space"></td> 
     <td>4</td> 
     <td class="space"></td> 
     <td>5</td> 
     <td>6</td> 
     <td class="space"></td> 
     <td>7</td> 
    </tr> 
    </tbody> 
</table> 

CSS

/* make the cells appear to be empty */ 
.space { 
    background: none; 
    /* make the width small, but setting it to 0 will actual default to the same width as other cells */ 
    width: 0.1rem; 
} 

你也需要移動thead背景色爲th元素：

th { 
    background: orange; 
} 

的jsfiddle：https://jsfiddle.net/L43weozq/

Answer 2

通過僞類：https://jsfiddle.net/glebkema/y4ff5m61/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
thead { 
 
    background: orange; 
 
} 
 

 
th, td { 
 
    text-align: center; 
 
    border: none !important; 
 
} 
 

 
tr:first-child > th:not(:last-child), 
 
tr:last-child > th:nth-child(3), td:nth-child(3), 
 
tr:last-child > th:nth-child(4), td:nth-child(4), 
 
tr:last-child > th:nth-child(6), td:nth-child(6) { 
 
    border-right: 15px solid white !important; 
 
}

<table class="table table-striped table-bordered table-hover"> 
 
    <thead> 
 
    <tr> 
 
     <th colspan="3"></th> 
 
     <th></th> 
 
     <th colspan="2">XYZ</th> 
 
     <th></th> 
 
    </tr> 
 
    <tr> 
 
     <th>A</th> 
 
     <th>B</th> 
 
     <th>C</th> 
 
     <th>D</th> 
 
     <th>E</th> 
 
     <th>F</th> 
 
     <th>G</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     <td>7</td> 
 
    </tr> 
 
    </tbody> 
 
</table>