Add space between two columns

Question

I have an HTML table. I need to have spacing between the table columns, but not the table rows.

My table columns also have border around them:

<table>
<tr>
    <td style="padding:0 15px 0 15px;">hello</td>
    <td style="padding:0 15px 0 15px;">world</td>
    <td style="padding:0 15px 0 15px;">how</td>
    <td style="padding:0 15px 0 15px;">are</td>
    <td style="padding:0 15px 0 15px;">you?</td>
</tr>
<tr>
    <td style="padding:0 15px 0 15px;">hello</td>
    <td style="padding:0 15px 0 15px;">world</td>
    <td style="padding:0 15px 0 15px;">how</td>
    <td style="padding:0 15px 0 15px;">are</td>
    <td style="padding:0 15px 0 15px;">you?</td>
</tr>
</table>

Css

table td{
   border : 1px solid black;
   border-spacing: 1em 0;
 }

fiddle

Try reading a bit on cellpadding and cellspacings. https://stackoverflow.com/q/15517632/1221731 — saNiks, Nov 03 '17 at 20:09
Apply `border-style: double;` as demonstrated here: https://jsfiddle.net/u5mN4/1668/ — UncaughtTypeError, Nov 03 '17 at 20:13
@UncaughtTypeError . It works but its very small space. Any idea how can i increase this space ? — Ancient, Nov 03 '17 at 20:15
If you require them any larger, and you can't make `border-spacing` work, then consider adding "empty" cells that fulfill this role, you can then adjust the widths of these empty intermittent cells accordingly. — UncaughtTypeError, Nov 03 '17 at 20:19

score 6 · Accepted Answer · answered Nov 03 '17 at 20:08

6

If I use the cellspacing css property it does it between both rows and columns.

There is no cellspacing CSS property.

The property is called border-spacing and …

The lengths specify the distance that separates adjoining cell borders. If one length is specified, it gives both the horizontal and vertical spacing. If two are specified, the first gives the horizontal spacing and the second the vertical spacing. Lengths may not be negative.

… takes two values.

So:

border-spacing: 1em 0;

answered Nov 03 '17 at 20:08

Quentin

914,110
126
1,211
1,335

nah, border-spacing is also not working. You can check fiddle i updated fiddle with border-spacing – Ancient Nov 03 '17 at 20:12
@Ancient — Take `border-collapse: collapse` out of your stylesheet. It causes `border-spacing` to be ignored. (And put an [mcve] in your question, don't hide vital parts of your code on a third party site). – Quentin Nov 03 '17 at 20:16
i didn't added `border-collapse: collapse`. and yes i will add the css here also – Ancient Nov 03 '17 at 20:27
Don't know about that .... maybe i tried to add previously but i am unable to see this collapse property in my style section. That's why i made statement. Anyway its working and thanks – Ancient Nov 03 '17 at 20:45

score 1 · Answer 2 · answered Nov 03 '17 at 20:55

1


table {

    border-collapse: separate;
    border-spacing: 1em 0;

}

https://www.w3schools.com/cssref/pr_border-spacing.asp

answered Nov 03 '17 at 20:55

EverestOnline Marketing

19
3

score 0 · Answer 3 · answered Nov 03 '17 at 20:33

0

Set display to inline-table and create right margin for each td:

table tr td{
  border:1px solid black;
  display:inline-table;
  margin-right:10px;
}

You can remove the margin from last child this way:

table tr td:last-child {
    margin-right:0;
}

answered Nov 03 '17 at 20:33

SG_Rowin

622
3
19

http://jsbin.com/kisowoyaju/1/edit?html,css,output — That stops the columns lining up – Quentin Nov 03 '17 at 20:35

Add space between two columns

3 Answers3