Tim Guo Tim Guo - 22 days ago 5
CSS Question

How to add spacing between certain columns of a table?

I want to make a table like this:
Intended

There should be spacing between C and D, D and E, and F and G. But there shouldn't have any space between any other column, for instance A and B.

This is what I currently have:
Current

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

The easiest solution would be to include some additional empty columns in your 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;
}

You'll also need to move the thead background-color to the th elements:

th {
  background: orange;
}

JSFiddle: https://jsfiddle.net/L43weozq/