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   lt  xml version  1 0  encoding  utf-8   gt   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN           http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  lang  en  gt    lt head gt     lt title gt Tera Byte Video Game Creation Camp lt  title gt     lt link rel  stylesheet  type  text css  href  style css  gt  lt  link gt   lt  head gt    lt body gt     lt table class  mytable  align  center  gt       lt tr class  header  gt         lt td colspan  3  gt  lt img src  images home 01 png    gt  lt  td gt       lt  tr gt       lt tr class  top  gt         lt td colspan  3  gt  lt img src  images home 02 png    gt  lt  td gt       lt  tr gt       lt tr class  link-row  gt         lt td gt  lt img src  images home 03 png    gt  lt  td gt         lt td gt  lt img src  images home 04 png    gt  lt  td gt         lt td gt  lt img src  images home 05 png    gt  lt  td gt       lt  tr gt       lt tr class  link-row  gt         lt td gt  lt img src  images home 07 png    gt  lt  td gt         lt td gt  lt img src  images home 06 png    gt  lt  td gt         lt td gt  lt img src  images home 08 png    gt  lt  td gt       lt  tr gt       lt tr class  link-row  gt         lt td gt  lt img src  images home 09 png    gt  lt  td gt         lt td gt  lt img src  images home 10 png    gt  lt  td gt         lt td gt  lt img src  images home 11 png    gt  lt  td gt       lt  tr gt       lt tr class  link-row  gt         lt td gt  lt img src  images home 12 png    gt  lt  td gt         lt td gt  lt img src  images home 13 png    gt  lt  td gt         lt td gt  lt img src  images home 14 png    gt  lt  td gt       lt  tr gt       lt tr class  bottom  gt         lt td colspan  3  gt  lt img src  images home 15 png    gt  lt  td gt       lt  tr gt     lt  table gt    lt  body gt    lt  html gt

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

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

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

User · Answer

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

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

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

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

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

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

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

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

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

User · Answer

adding this line to the beginning of the file s worked for me    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt    modifying the css to set the proper border properties did not work until i added the above line

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

Examples related to html

Examples related to css

Examples related to html-table