Question

It doesn’t seem to be a different requirement but just couldn’t get it done, here is my html page: http://www.xiexianhui.com/baxjoomla15/index0.html

If you open the page and check the source code, you will see:

tr.spaceUnder > td
{
  padding-bottom: -0.5em;
}

that’s used to control the spacing between rows in table. It works fine if I NEED MORE SPACE but fails to work if I NEED LESS SPACE. How do I decrease the space in my page?

In some case I also need to make the images re-sizable, how do I do it?

Answer 1

padding cannot be negative.
Set it to be 0, try to add cellpadding=0 cellspacing=0 to your <table> tag, like
<table cellspacing=0 cellpadding=0>...</table>
Apply it to each table. Then, apply margin: 0; padding: 0; to each table’s style.
By the way, I would suggest you to display the td tags without images, with 1 pixel border width to fit them exactly as you like. Then, when they are fine, you could add the images.

If you want each image to fit the cell exactly,
you need to have their width sum exactly the same for each cell,
because the height/width of a row/column gets the value of the largest element in the row/column, unless you set it by hand.

UPDATE
Try to apply next lines to your code:

$( "img" ).each( function(){ this.style.padding = 0; this.style.margin = 0; } )
$( "td" ).each( function(){ this.style.padding = 0; this.style.margin = 0; } )

That puts us a bit closer to expected result.