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>

how about this? https://stackoverflow.com/questions/2070817/add-space-between-cells-td-using-css — Sanjeev Kumar, Jun 08 '17 at 07:37
Can't you undo the unwanted spacing created by `border-spacing` with `margin: -15px` for the `table`? — Ilya Streltsyn, Jun 08 '17 at 08:04
@Swellar I want to get 15px spacing only between td. Example : Thanks — , Jun 08 '17 at 08:18

score 4 · Answer 1 · answered Jun 08 '17 at 11:19

Use border-spacing: 15px 0px to generate only horizontal spacing;
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>

Ehsan · Answer 2 · 2017-06-08T08:20:42.523

3

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>

edited Jun 08 '17 at 08:20

answered Jun 08 '17 at 07:44

Ehsan

12,655
3
25
44

Good point about standard structure but unfortunately this is not an answer to the question. Please read again and edit your answer. – dennispreston Jun 08 '17 at 08:11
Thanks for your reply, but with this way we get problem i show in image n°2 http://i.imgur.com/OVtjnu1.png – Jun 08 '17 at 08:13

dennispreston · Answer 3 · 2017-06-08T08:00:32.150

1

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>

edited Jun 08 '17 at 08:00

answered Jun 08 '17 at 07:53

dennispreston

596
4
14

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 – Jun 08 '17 at 08:57
@PierreArkona yes, it is a messy solution. You could set different classes for different tables e.g. `
` and declare the different widths in the css e.g. `.4cols .cell { width: calc(25% - 12px); }`
– dennispreston Jun 08 '17 at 09:02
1

Thanks, i think i will couple your way with javascript to get it 100% auto ! – Jun 08 '17 at 09:22

score -2 · Answer 4 · edited Jun 08 '17 at 07:40

-2

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>

edited Jun 08 '17 at 07:40

Paolo Forgia

6,572
8
46
58

answered Jun 08 '17 at 07:39

mobile32

32
4

Thanks for your reply, but with this way, have unwanted margin arround the td's https://i.stack.imgur.com/gOv3P.png – Jun 08 '17 at 08:04

Spacing between columns in a table

4 Answers4