3
Is there any way to give spacing between <td> as in the figure below?
NOTE: With spacing only on the right of the <td>.
4 answers
2
Yes, there is a way using the border-collpse and border-spacing in the CSS:
table td {
border: solid 1px #000;
}
table{
border-collapse: separate;
border-spacing: 10px;
margin: 0 0 0 0;
}<table>
<tr>
<td>Coluna 1
</td>
<td>
Coluna 2
</td>
</tr>
<tr>
<td>Coluna 1
</td>
<td>
Coluna 2
</td>
</tr>
</table>-
1
Danilo, had done with cellspacing, but saw that it is not supported by HTML5.
-
Yes it is not supported, was edit my answer
2
I got the effect you need by placing a class in the td of the column in question and using a custom css for it:
td { background: gray; padding:10px }
.tdEspaco { display: table; float:left; margin-right:10px }
table { border-spacing: 5px; }<table>
<tr>
<td class='tdEspaco'>1</td>
<td >2</td>
<td >3</td>
</tr>
<tr>
<td class='tdEspaco'>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td class='tdEspaco'>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>-
There is an easier way than using padding, padding is internal spacing
-
The padding that I put in does not influence the answer. It was just a matter of aesthetics.
1
You can use the property css border-Spacing in his table.
table {
border-spacing: 15px 10px;
}
table>tbody>tr>td {
background: blue;
padding: 5px 20px;
}<table>
<tr>
<td>Coluna 1
</td>
<td>
Coluna 2
</td>
</tr>
<tr>
<td>Coluna 1
</td>
<td>
Coluna 2
</td>
</tr>
</table>-
padding is internal spacing, in my case I want to give external spacing.
-
Try this, not always padding gives internal space.
-
No, man, I tried.
-
@Brendoll. I didn’t read your question right. = / I’ll edit the answer.
-
I managed to do with border-Collapse: Separate; and border-Spacing: 10px 3px; but this way I can’t get the right margin =/
-
@Brendoll. check out the changes I made.
-
margin-right: 0 does not solve, to take the right margin? Look at my answer.
-4
I got the simplest impossible
border-right: solid 10px #fff;
border-bottom: solid 3px #fff;
-
1
The more you’re not giving space. You’re leaving the thicker edge in the white color.
-
2
That sounds like a scam. You better learn the right way than do this kind of thing.
Browser other questions tagged html css table
You are not signed in. Login or sign up in order to post.
You can use margin in each one. Example, use in your css: td{margin-right:10px;}
– Tiago P.C
@Tiagop. C already tried, does not catch margin on td’s
– Lourençon O.
So with padding, as Pedro’s answer says, below.
– Tiago P.C
padding is internal spacing, in my case I want to give external spacing.
– Lourençon O.