CODEWITHSUNDEEP
htmlcsshtml-table
Ancient
Ancient

Reputation: 3057

Add space between two columns

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

Upvotes: 4

Views: 14490

Answers (3)

EverestOnline Marketing
EverestOnline Marketing

Reputation: 29


table {

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

}

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

Upvotes: 2

SG_Rowin
SG_Rowin

Reputation: 622

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;
}

Upvotes: 0

Quentin
Quentin

Reputation: 944531

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;

Upvotes: 6

Related Questions