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

by

Adding to vectran’s answer: You also have to set cellspacing attribute on the table element for cross-browser compatibility.

<table cellspacing="0">

EDIT (for the sake of completeness I’m expanding this 5 years later:):

Internet Explorer 6 and Internet Explorer 7 required you to set cellspacing directly as a table attribute, otherwise the spacing wouldn’t vanish.

Internet Explorer 8 and later versions and all other versions of popular browsers – Chrome, Firefox, Opera 4+ – support the CSS property border-spacing.

So in order to make a cross-browser table cell spacing reset (supporting IE6 as a dinosaur browser), you can follow the below code sample:

table{
  border: 1px solid black;
}
table td {
  border: 1px solid black; /* Style just to show the table cell boundaries */
}


table.no-spacing {
  border-spacing:0; /* Removes the cell spacing via CSS */
  border-collapse: collapse;  /* Optional - if you don't want to have double border where cells touch */
}
<p>Default table:</p>

<table>
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>

<p>Removed spacing:</p>

<table class="no-spacing" cellspacing="0"> <!-- cellspacing 0 to support IE6 and IE7 -->
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>

More Related Contents:

  1. How to design a table like this
  2. Set cellpadding and cellspacing in CSS?
  3. How do I create an HTML table with a fixed/frozen left column and a scrollable body?
  4. Word-wrap in an HTML table
  5. How to deal with page breaks when printing a large HTML table
  6. HTML/CSS: Making two floating divs the same height
  7. CSS3’s border-radius property and border-collapse:collapse don’t mix. How can I use border-radius to create a collapsed table with rounded corners?
  8. Make a div fill the height of the remaining screen space
  9. Why doesn’t table > tr > td work when using the child selector?
  10. Table with fixed header and fixed column on pure css
  11. How to display scroll bar onto a html table
  12. Fixed header table with horizontal scrollbar and vertical scrollbar on
  13. Add a horizontal scrollbar to an HTML table
  14. Wrap text in tag
  15. CSS table-cell equal width
  16. Rounded table corners CSS only
  17. using text-align center in colgroup
  18. Giving a border to an HTML table row,
  19. overflow:scroll; in
  20. How can I apply a border only inside a table?
  21. Equivalent to float in Outlook
  22. Table overflowing outside of div
  23. The border-radius property and border-collapse:collapse don’t mix. How can I use border-radius to create a collapsed table with rounded corners?
  24. Removing unwanted table cell borders with CSS
  25. Should Tables be avoided in HTML at any cost?
  26. CSS: display:block; vs display:table;
  27. Yet Another Divs vs Tables issue: Forms
  28. Splitting a table cell into two columns in HTML
  29. Table vertical header?
  30. How to make a table with equal column widths in CSS?

Leave a Comment