html – 如何在表的某些列之间添加间距？

概述我想做一个这样的表： 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');thea 我想做一个这样的表：

C和D,D和E以及F和G之间应该有间距.但是任何其他列之间不应该有任何空格,例如A和B.

这就是我目前拥有的：

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

@H_403_17@@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;} @H_403_17@<table > <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>解决方法 最简单的解决方案是在表中包含一些额外的空列：

HTML

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

CSS

@H_403_17@/* 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 background-color移动到第th个元素：

@H_403_17@th { background: orange;}

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

总结

以上是内存溢出为你收集整理的html – 如何在表的某些列之间添加间距？全部内容，希望文章能够帮你解决html – 如何在表的某些列之间添加间距？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。