Remove Spacing Between Table Cells and Rows

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

Add this CSS reset to your CSS code: (From here)

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

It'll reset the CSS effectively, getting rid of the padding and margins.

Remove spacing between table cells and rows

It looks like the DOCTYPE is causing the image to display as an inline element. If I add display: block to the image, problem solved.

Remove space between table row

Try adding a new attribuut (cellspacing) to the table holding the blue title

<table width="670" cellpadding="0" border="0" align="center" cellspacing="0">

Is it possible you are confusing cellpadding and padding with cellspacing, since i can't see any cellspacing attribuut to the table tags...

Removing spacing between HTML table rows and columns

cellspacing:0px;

Remove this. There used to be an HTML attribute named cellspacing, but it was obsoleted by CSS two decades ago.

cell-padding:0px;

The property is called padding. There isn't a special version of it for tables. (There used to be an HTML attribute named cellpadding, but again, CSS came along in the '90s and it isn't needed any more).

table,th,td {  border: none;  margin: 0px;  padding: 0;  border-spacing: 0px;}
div {  width: 5px;  height: 5px;  background-color: black;  display: block;}

<table>  <tr>    <th>      <div></div>    </th>    <th>      <div></div>    </th>  </tr>  <tr>    <th>      <div></div>    </th>    <th>      <div></div>    </th>  </tr>  <tr>    <th>      <div></div>    </th>    <th>      <div></div>    </th>  </tr>  <tr>    <td>      <div></div>    </td>    <td>      <div></div>    </td>  </tr></table>

Remove spacing between table rows

You should prevent h1, h2 elements from margin collapsing.

h1, h2 {
  margin: 0;
}

a:hover {  text-decoration: none !important;}.header h1 {  color: #055d90;  font: normal 25px Georgia, Times, serif;  margin: 0;  font-weight: bold;  padding: 0 0 0px 0;  line-height: 39px;  margin-top: 0;}.header p {  color: #cf373e;  font: normal 17px Georgia, Times, serif;  margin: 0;  padding: 0;  line-height: 12px;  font-style: italic;}.custinfo h1 {  color: #FFFFFF;  font: normal 25px Tahoma, Times, serif;  background-color: #FF8000;  padding: 10px 0 10px 0;}.custinfo h2 {  color: #FFFFFF;  font: normal 15px Tahoma, Times, serif;  background-color: #707070;  padding: 0 0 0 0;}.table {  border-collapse: collapse;}.table td {  margin: 0;  padding: 0;  display: block;}h1,h2 {  margin: 0;}

<table align="left" width="100%" class="table">  <tr>    <!--header-->    <table class="table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;  border-spacing: 0; margin-top: 0;">      <tr>        <td valign="top">          <img src="images/logo.gif" style="display: block; border: 0" alt="Sample Image" width="200" height="100">        </td>      </tr>      <tr>        <td valign="top" align="middle" class="header" width="100%">          <h1>Order</h1>
        </td>      </tr>    </table>    <table class="table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;  border-spacing: 0;">      <tr class="custinfo">        <td width="50%">          <h1>[DISTRIBUTOR NAME]</h1>         </td>        <td align="middle">          <h1>[ORDER DATE]</h1>
        </td>      </tr>    </table>    <table class="table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;  border-spacing: 0;">      <tr class="custinfo">        <td>          <h2>PO# [PO NUMBER]</h2>         </td>        <td>          <h2>Customer [COMPANY NAME]</h2>
        </td>        <td>          <h2>Total Order [TOTAL ORDER]</h2>
        </td>      </tr>      <tr class="custinfo" style="margin:0">        <td>          <h2>PO# [PO NUMBER]</h2>         </td>        <td>          <h2>Customer [COMPANY NAME]</h2>
        </td>        <td>          <h2>Total Order [TOTAL ORDER]</h2>
        </td>      </tr>    </table>

How to remove spaces between cells in a html table

The browsers are not telling you that your border-spacing style is overridden by the user agent style sheet. Instead, they may indicate that inheritance does not take place for it. This is simply caused by the fact that some style sheet sets the property on the element.

The reason why your rule is not applied to the inner table element is that it does not match any of your selectors. The selector

table.tableGroup > tr > td > table

does not match it, because a tr element is never a child of table even if might appear to be. By HTML syntax, there is an intervening tbody element, even if its start and end tag are missing. The following selector would match:

table.tableGroup > tbody > tr > td > table

Of course, a mere table selector would do the job as well, provided that you want all table elements to be styled by the rule.

Removing table lines and table space between cells in css

table#myTable{
  border-collapse:collapse;
}

Removing spacing between table cells for a single row only

Please try to use tables in better way. So if you have header in your table make it like this:

<table>
  <thead>
    <tr>
      <th>header 1</th>
      <th>header 2</th>
       ...
    </tr>
  </thead>
  <tbody>
    (table content goes here>
  </tbody>
</table>

Now you can easily separate styles for header and table body.

<thead> was made specifically for table header sections, because they are widely used. If you have a footer in your table, you can also use the <tfoot> tag (but keep in mind that is has to appear before the <tbody> tag).

Hope this is what you're looking for.

Edit:
Another possibility is to create two tables, one for headers and one for content. You could also make headers out of div elements and style them in table fashion. As pointed out in the comments, it is impossible to apply different values of cellspacing or cellpadding.

<table cellspacing="0">
  (headers)
</table>
<br />
<table cellspacing="2">
  (content)
</table>

Yet another option is to create the entire table from div elements, but for tabular content it is better to use table.

Remove spacing between table rows in HTML email

Since display:block wasn't a solution, I tried removing the <!doctype html> declaration and that fixed the issue. Normally I don't think this would be acceptable, but to the best of my knowledge - and after testing - it does not have any negative impact for HTML email.

Space between td. Why and how can I remove?

Use cellspacing and cellpadding :

 <table cellspacing="0" cellpadding="0">

 </table>

---

Related Topics