Spacing between columns in a table

Question

I have a big problem with the spacing of columns in a table. Here's what I'd like to get, spacing only between <td>:

Not working with margin, padding or border:

td {
  padding-left: 7.5px;
  padding-right: 7.5px;
}

td:first-child {
  padding-left: 0;
}

td:last-child {
  padding-right: 0;
}

<td></td>
<td></td>
<td></td>
<td></td>

Not working with border-spacing:

And if use first-child and last-child, same problem as previous image.

Solution I found, but really dirty:

.spacer {
  width: 15px;
  height: 15px;
}

<td></td>
<div id="spacer"></div>
<td></td>
<div id="spacer"></div>
<td></td>
<div id="spacer"></div>
<td></td>

Headpiece

You want to remove or add that 15px spacing? – Thickhead

how about this? #2071317 – Nashner

Can't you undo the unwanted spacing created by border-spacing with margin: -15px for the table? – Spear

@IlyaStreltsyn unfortunately not! – Jeanelle

@Swellar I want to get 15px spacing only between td. Example : <td><space><td><space><td> Thanks – Headpiece

Answer 1

1. Use border-spacing: 15px 0px to generate only horizontal spacing;
2. To not display only left and right spacing, you can wrap the table in a div, and set margin: 0px -15px to table. Then, set overflow: hidden; to div how hide extra left and right spacing.

td {
  padding-left: 7.5px;
  padding-right: 7.5px;
  background-color: red;
  height: 40px;
  border: 1px solid green;
  width: 25%;
}

td:first-child {
  padding-left: 0;
}

td:last-child {
  padding-right: 0;
}

table {
  width: calc(100% + 30px);
  table-layout: fixed;
  border-spacing: 15px 0px;
  background: green;
  margin: 0px -15px;
}

.table-container {
  overflow: hidden;
  width: 400px;
  margin: 0 auto;
}

<div class="table-container">
  <table>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>

Eustatius

Answer 2

1) You must use Standard structure for table when you want work with css on it.

change :

<td></td>
<td></td>
<td></td>
<td></td>

To:

<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>   
</table>

2) If want space between TDs add border-spacing:30px 0px; to table.

td {
  padding-left: 7.5px;
  padding-right: 7.5px;
  background-color: orange;
}

td:first-child {
  padding-left: 0;
}

td:last-child {
  padding-right: 0;
}

table {
    border-spacing:30px 0px;
  }

<table>
   <tr>
	<td>TD1</td>
	<td>TD2</td>
	<td>TD3</td>
	<td>TD4</td>
   </tr>	
</table>

Ode

Good point about standard structure but unfortunately this is not an answer to the question. Please read again and edit your answer. – Jeanelle

Thanks for your reply, but with this way we get problem i show in image n°2 i.imgur.com/OVtjnu1.png – Headpiece

Answer 3

Use <div> and margin instead.

.table {
  width: 100%;
  height: 500px;
}

.row {
  width: 100%;
  height: 100%;
}

.cell {
  float: left; /* make the divs sit next to each other like cells */
  background: red;
  width: calc(25% - 12px); /* 4 cells so 25% but minus 12 because we have 3 x 15px margins divided by 4 cells which is 11.25 but decimals can cause issues in some browsers */
  height: 100%;
  margin-left: 15px;
}

.cell:first-child {
  margin-left: 0;
}

<div class="table">
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

Jeanelle

Thanks for your reply, you have well understand my question, your reply seem to work ! But with this way, we need to know how many exactly have cells (for 4 cells : calc(25% - 12px)), possible to do it auto ? Thanks anyway – Headpiece

@PierreArkona yes, it is a messy solution. You could set different classes for different tables e.g. <div class="table 4cols"> and declare the different widths in the css e.g. .4cols .cell { width: calc(25% - 12px); } – Jeanelle

Thanks, i think i will couple your way with javascript to get it 100% auto ! – Headpiece

Answer 4

Try to use cellspacing attribute.

<table cellspacing="10">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Unlawful

Thanks for your reply, but with this way, have unwanted margin arround the td's i.sstatic.net/gOv3P.png – Headpiece