Example of how to change the line spacing of HTML table

When using HTML tables, we sometimes need to change the line spacing, but changing margin, padding, collapse and other methods are not very effective. Here I found a useful little trick. Use the display attribute + margin to achieve this.
example:

tr{margin-top:0px;padding:0px;display:block;}

Let's take a look at the comparison

tr{margin-top:-10px;padding:0px;display:block;}

It can be clearly seen that the line spacing has been shortened a lot.

Other solutions

Question:

The default display of tr in table is display:table-row. Although it can be changed to display:block, it will lose the unique display effects of tr, such as (automatic alignment of td);

And it is useful to set padding in tr, which can increase the inner margin, but it is useless to set margin, the outer spacing of tr is still 0;

Solution:

Two CSS properties: border-collapse:collapse / separate & border-spacing:10px 10px;

Need to use border-collapse & border-spacing to control the spacing of tr;

like:

<table style="border-collapse:separate; border-spacing:10px;">
    <tr></tr>
</table>

This is the end of this article about examples of how to change the line spacing of HTML tables. For more relevant content about HTML table line spacing, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future!