how to make spacing between table rows

Question

I'm trying to recreate this table:

but the spacing between the rows (border-spacing: 0 2px) is not working, anyone knows why?

My code:

<center> <table style="z-index: 34; background-color: #57e8e8; width: 50%; border-collapse: collapse; border-spacing: 0 2px;"> <tbody> <tr> <td style="padding: 5px; border-collapse: collapse; border-spacing: 0 2px;">Usu&aacute;rio:&nbsp;<strong>teste</strong></td> </tr> <tr> <td style="background-color: transparent; color: #131e2e; padding: 5px; border-collapse: collapse; border-spacing: 0 2px;">Senha:&nbsp; &nbsp;<strong>teste</strong></td> </tr> </tbody> </table> </center>

Nothing to do with your issue, but <center> was deprecated in HTML 4.01. Might be a good idea to let that one go. — Heretic Monkey
– Heretic Monkey, Commented Jan 2, 2020 at 17:30
Due border-collapse: collapse , table borders are getting collapsed and together and border-spacing property has no effect with border-collapse: collapse use border-collapse: separate — Naga Sai A
– Naga Sai A, Commented Jan 2, 2020 at 17:30
Note that even with border-collapse: separate, the background color of your table will show through; make the background color of your td the blue color and the background color of your table transparent. — Heretic Monkey
– Heretic Monkey, Commented Jan 2, 2020 at 17:32
@HereticMonkey What about outlook? How can I center things for outlook users? — Luiz Ribeiro
– Luiz Ribeiro, Commented Jan 2, 2020 at 17:32

symlink · Accepted Answer · 2020-01-02 17:33:58Z

Give the table cells a background-color, not the whole table. Then remove the border-collapse rules:

table{ z-index: 34; width: 50%; border-spacing: 0 2px; } td{ background-color: #57e8e8; color: #131e2e; padding: 5px; }

<center> <table> <tbody> <tr> <td style="">Usu&aacute;rio:&nbsp;<strong>teste</strong></td> </tr> <tr> <td style="">Senha:&nbsp; &nbsp;<strong>teste</strong></td> </tr> </tbody> </table> </center>

Collectives™ on Stack Overflow

how to make spacing between table rows

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related