如何在 table 的某些列之间添加间距?
How to add spacing between certain columns of a table?
我想制作一个 table 这样的:
C和D、D和E、F和G之间应该有间距。但是任何其他列之间不应该有任何space,例如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>
最简单的解决方案是在 table:
中添加一些额外的空列
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/
通过伪类: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>
我想制作一个 table 这样的:
C和D、D和E、F和G之间应该有间距。但是任何其他列之间不应该有任何space,例如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>
最简单的解决方案是在 table:
中添加一些额外的空列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/
通过伪类: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>