html - 如何减少 HTML 表格中的行空间

Question

这似乎不是一个不同的要求，但只是无法完成，这是我的 html 页面：http ://www.xiexianhui.com/baxjoomla15/index0.html

如果您打开页面并查看源代码，您将看到：

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

用于控制表格中行之间的间距。如果我需要更多空间，它可以正常工作，但如果我需要更少的空间，它就无法工作。如何减少页面中的空间？

在某些情况下，我还需要重新调整图像大小，我该怎么做？

Answer 1

padding不能为负。将其设置为 0，尝试添加cellpadding=0 cellspacing=0到您的<table>标签，例如 <table cellspacing=0 cellpadding=0>...</table> 将其应用于每个表。然后，应用margin: 0; padding: 0;到每个表格的样式。顺便说一句，我建议您显示td没有图像的标签，边框宽度为 1 像素，以完全符合您的喜好。然后，当它们很好时，您可以添加图像。

如果您希望每个图像完全适合单元格，则需要使每个单元格的宽度总和完全相同，因为行/列的高度/宽度获取行/列中最大元素的值，除非您手动设置。

更新 尝试将下一行应用于您的代码：

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

这使我们更接近预期的结果。

Answer 2

你的table元素中有td元素。你应该只有 1 个，而不是 3 个表。

要删除表格的默认间距，您应该执行以下操作：

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

您应该从 td 元素中删除表格，因为它们看起来毫无意义。像这样的东西：

<table width="780" border="0" align="center" cellspacing="0" bordercolor="#000000" id="content" name="content">
  <tr class="spaceUnder">
        <td width="300"><img src="1930.png" width="300" height="130" /></td>
        <td width="150"><img src="1931.png" width="149" height="130" /></td>
        <td width="150"><img src="1930.png" width="149" height="130" /></td>
        <td width="300"><img src="1651.png" width="300" height="130" /></td>
      </tr>

  <tr class="spaceUnder">
    <td width="150"><img src="1931.png" width="149" height="130" /></td>
        <td width="150"><img src="1931.png" width="149" height="130" /></td>
        <td width="300"><img src="1930.png" width="300" height="130" /></td>
        <td width="150"><img src="1931.png" width="149" height="130" /></td>
        <td width="150"><img src="1931.png" width="149" height="130" /></td>
   </tr>
</table>