How to remove unwanted space between rows and columns in table

Question

How do I remove the extra space between the rows and columns in the table.

I've tried changing the margin, padding, and various border properties on the table and tr and td.

I want the pictures to all be right next to each other to look like one big image.

How should I fix this?

CSS

table {
  border-collapse: collapse;
}

HTML

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>Tera Byte Video Game Creation Camp</title>
  <link rel="stylesheet" type="text/css" href="style.css"></link>
</head>

<body>
  <table class="mytable" align="center">
    <tr class="header">
      <td colspan="3"><img src="images/home_01.png" /></td>
    </tr>
    <tr class="top">
      <td colspan="3"><img src="images/home_02.png" /></td>
    </tr>
    <tr class="link-row">
      <td><img src="images/home_03.png" /></td>
      <td><img src="images/home_04.png" /></td>
      <td><img src="images/home_05.png" /></td>
    </tr>
    <tr class="link-row">
      <td><img src="images/home_07.png" /></td>
      <td><img src="images/home_06.png" /></td>
      <td><img src="images/home_08.png" /></td>
    </tr>
    <tr class="link-row">
      <td><img src="images/home_09.png" /></td>
      <td><img src="images/home_10.png" /></td>
      <td><img src="images/home_11.png" /></td>
    </tr>
    <tr class="link-row">
      <td><img src="images/home_12.png" /></td>
      <td><img src="images/home_13.png" /></td>
      <td><img src="images/home_14.png" /></td>
    </tr>
    <tr class="bottom">
      <td colspan="3"><img src="images/home_15.png" /></td>
    </tr>
  </table>

</body>

</html>

This question is related to html css html-table

User · Answer

Try this   table  border-collapse  collapse      cellspacing  equivalent       table td   table th  padding  0      cellpadding  equivalent

User · Answer

table        border-collapse  collapse      will collapse all borders separating the table columns     or try   lt table cellspacing  0  style  border-spacing  0   gt    do all cell-spacing to 0 and border spacing 0 to achieve same   have a fun

User · Answer

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

User · Answer

Have you tried removing the TRs that have a colspan and see if it changes anything?

I have experienced colspans and rowspans to be pretty nasty when it comes down to accurate table-designs. If your images look alright without the colspan-TRs, I'd start from there and build a nested tableset.

Also your style.css doesn't seem to be complete, maybe there's something wrong there? I'd at least add padding: 0; margin: 0; to the table (or to the class "mytable"). Make sure, your images don't have spaces and/or borders, too (e.g. by adding img { border: 0; } to your stylesheet).

User · Answer

This worked for me    table     border-collapse  collapse    border-spacing  0

User · Answer

setting Cellpadding and cellspacing to 0 will remove the unnecessary space between rows and columns

User · Answer

For standards compliant HTML5 add all this css to remove all space between images in tables   table        border-spacing  0      border-collapse  collapse    td       padding 0px    td img       display block

User · Answer

For images in td  use this for images   display  block    That removes unwanted space for me

User · Answer

Adding to vectran s answer  You also have to set cellspacing attribute on the table element for cross-browser compatibility    lt table cellspacing  0  gt    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    x000D   x000D  table  x000D    border  1px solid black  x000D    x000D  table td   x000D    border  1px solid black     Style just to show the table cell boundaries    x000D    x000D   x000D   x000D  table no-spacing   x000D    border-spacing 0     Removes the cell spacing via CSS    x000D    border-collapse  collapse      Optional - if you don t want to have double border where cells touch    x000D    x000D   lt p gt Default table  lt  p gt  x000D   x000D   lt table gt  x000D     lt tr gt  x000D       lt td gt First cell lt  td gt  x000D       lt td gt Second cell lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   lt p gt Removed spacing  lt  p gt  x000D   x000D   lt table class  no-spacing  cellspacing  0  gt   lt  -- cellspacing 0 to support IE6 and IE7 -- gt  x000D     lt tr gt  x000D       lt td gt First cell lt  td gt  x000D       lt td gt Second cell lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

I had this problem and none of the suggestions from several posts worked, I tried them all. My problem turned out that the table I was creating is nested in another table, inheriting on its properties. I needed to override the container table.

In this example, SuColTable is class on the table.

.SuColTable tr {
    border: none !important;
}

.SuColTable td {
    border-spacing: 0 !important;
    border: none !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
}


.SuColTable {
    border-collapse: collapse !important;
    border: none !important;
    border-spacing: 0 !important;
    border-collapse: separate !important;
    padding-left: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
// all padding would be padding: 0 !important

The border-collapse, border:none and border-spacing get rid of table/row/column line. The padding 0 calls get rid the padding from the container table. I had to including !important on every style for it work, in order override the container table styles.

I have padding_top, left and bottom (instead of only padding) because I have two other classes that control the padding_right.

line-height: 0px;

Line-height zero makes the row one line high. If you have several lines, they are compressed into one line.

User · Answer

adding this line to the beginning of the file s worked for me:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

modifying the css to set the proper border properties did not work until i added the above line

User · Answer

x000D   x000D  table  x000D    border  1px solid black  x000D    x000D  table td   x000D    border  1px solid black     Style just to show the table cell boundaries    x000D    x000D   x000D   x000D  table no-spacing   x000D    border-spacing 0     Removes the cell spacing via CSS    x000D    border-collapse  collapse      Optional - if you don t want to have double border where cells touch    x000D    x000D   lt p gt Default table  lt  p gt  x000D   x000D   lt table gt  x000D     lt tr gt  x000D       lt td gt First cell lt  td gt  x000D       lt td gt Second cell lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   lt p gt Removed spacing  lt  p gt  x000D   x000D   lt table class  no-spacing  cellspacing  0  gt   lt  -- cellspacing 0 to support IE6 and IE7 -- gt  x000D     lt tr gt  x000D       lt td gt First cell lt  td gt  x000D       lt td gt Second cell lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

All I had to do was add   line-height  0px    in my   lt tr     gt

User · Answer

Just adding on top of Jacob s answer  for img in td   body  line-height  0   img  display  block  vertical-align  bottom     This works for most email clients  including Gmail  But not Outlook  For outlook  you need to do two steps more   table  border-collapse  collapse     and set every td elements to have the same height and width as its contained images  For example    lt td width  600  height  80  style  line-height  80px   gt       lt img height  80  src  http   www website com images Nature 01 jpg  width  600    gt   lt  td gt

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

The answer is

Examples related to html

Examples related to css

Examples related to html-table

Tags