10

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>:

enter image description here

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>

enter image description here

Not working with border-spacing:

enter image description here

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>

Improve this question
5
  • You want to remove or add that 15px spacing? Commented Jun 8, 2017 at 7:37
  • how about this? stackoverflow.com/questions/2070817/… Commented Jun 8, 2017 at 7:37
  • 1
    Can't you undo the unwanted spacing created by border-spacing with margin: -15px for the table? Commented Jun 8, 2017 at 8:04
  • 1
    @IlyaStreltsyn unfortunately not! Commented Jun 8, 2017 at 8:14
  • @Swellar I want to get 15px spacing only between td. Example : <td><space><td><space><td> Thanks Commented Jun 8, 2017 at 8:18

4 Answers 4

Reset to default
4

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Good point about standard structure but unfortunately this is not an answer to the question. Please read again and edit your answer.
Thanks for your reply, but with this way we get problem i show in image n°2 i.imgur.com/OVtjnu1.png
4
  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>

Improve this answer

Comments

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>

Improve this answer

3 Comments

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
@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); }
Thanks, i think i will couple your way with javascript to get it 100% auto !
-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>

Improve this answer

1 Comment

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