How to remove unwanted space between rows and columns in table?

html

responsive-design

best-practices

css

byAnton Shumikhin·Dec 23, 2024

To obliterate unwanted space in HTML tables, apply border-collapse: collapse; to your <table>, nix the padding with padding: 0; on your <td> and <th>, like so:

table {
  border-collapse: collapse; /* like crushing a can */
}

td, th {
  padding: 0; /* none shall pass! */
}

Wait, images create pesky whitespace? Cast display: block and subdue the extra space with line-height: 0;. For an extra broadsword swing at backward compatibility, add cellspacing="0" to your <table>.

A picture-perfect table layout

Even in the realm of tables, there's room for pixel-perfect precision:

Set width and height of your <td> elements to specifically match the content.
Apply vertical-align: bottom to remove any unwanted space beneath elements within cells.

The tale of borders and spacing

Internet Explorer's eccentricities

As HTML/CSS translators, browsers have their quirks. In the realm of older Internet Explorers is where cellspacing steps up:

<table cellspacing="0"> <!-- Ancient spell for older explorers -->
  <!-- your heroic table rows go here -->
</table>

Internet Explorer 7 and below speak the cellspacing tongue.
Advancements in Internet Explorer 8 and beyond were happy to hear CSS's border-spacing: 0; charm.

The art of visual cohesion

Air-tight visuals allow tables to display numerous connected images as if they were a ceramic tile mosaic:

Be precise as an arrow strike! Match td dimensions exactly with those of interior images.
To fill their td homes, images require the display: block property.
Finetune your masterpiece with border-spacing: 0; to achieve perfect alignment.

Conquering specific layout challenges

The puzzles of email compatibility

The nature of email clients is a bag of surprises. Apply styles with care to prevent unnecessary commotion:

Deploy border-collapse: collapse; with caution in the email wilderness, as clients may react unexpectedly.
Inline styles in email HTML are your best allies in preserving dimensions under all circumstances.

Countering the inline-block spaces invaders

Inline-block elements can become unwanted guests when it comes to spacing. Here's your game plan:

On the parent element, declare font-size: 0; to banish whitespace caused by inline-block.
Reinstate the original font-size on child elements so that the text maintains readability.

explain-codes / Html / How to remove unwanted space between rows and columns in table?

Linked

Css: how do I create a gap between rows in a table?



Css Cell Margin



Set cellpadding and cellspacing in CSS?



Why is a div with "display: table-cell;" not affected by margin?



Td widths, not working?

