Question

在我的jsp项目中，我使用表来命令我的值。有很多垂直空间被浪费在行中，我该如何避免呢？我试图将填充，边距等设置为0px。还有空间即将到来。我正在使用Dream weaver进行设计。

<table width="742"  cellpadding="0" cellspacing="0" vspace="0">

        <tr onmouseover='over(1)' onmouseout='out()'>
            <td width="113"><h4>F Name 1</h4></td>
            <td width="126"><h4>L Name 1</h4></td>
            <td width="61"><h4>Age 1</h4></td>
            <td width="111"><h4>Gender 1</h4></td>
            <td width="304"><h4>Address 1</h4></td>
        </tr>

        <tr  onmouseover='over(2)' onmouseout='out()'>
            <td ><h4>F Name 2</h4></td>
            <td><h4>L Name 2</h4></td>
            <td><h4>Age 2</h4></td>
            <td><h4>Gender 2</h4></td>
            <td><h4>Address 2</h4></td>
        </tr>

        <tr  onmouseover='over(3)' onmouseout='out()'>
            <td><h4>F Name 3</h4></td>
            <td><h4>L Name 3</h4></td>
            <td><h4>Age 3</h4></td>
            <td><h4>Gender 3</h4></td>
            <td><h4>Address 3</h4></td>
        </tr>
                </table>

Answer 1

您还需要删除h4标记的默认边距。

h4 { margin:0;}

所有H（h1-h5）标签都有内置边距。

Answer 2

标题标签H1 -H6存在一些默认保证金把margin = 0 例如 h4 {margin：0;}

Answer 3

您是否尝试在CSS中设置此内容？

<style type="text/css">
 .mytable, .mytable td {
   width: 742px;
   padding: 0;
   margin: 0;
 }
 H4 {
   padding: 0;
   margin: 0;
 }
</style>
<table class="mytable">

        <tr onmouseover='over(1)' onmouseout='out()'>
            <td width="113"><h4>F Name 1</h4></td>
            <td width="126"><h4>L Name 1</h4></td>
            <td width="61"><h4>Age 1</h4></td>
            <td width="111"><h4>Gender 1</h4></td>
            <td width="304"><h4>Address 1</h4></td>
        </tr>
...

此外，您可以在CSS中处理TD宽度和内容格式，它会清理您的HTML。

Answer 4

在CSS中：

h4 { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
table td { margin: 0; padding: 0; }

对于那些感兴趣的人，Mozilla describes border-collapse深入了解。在此示例的上下文中：

在折叠边框模型中，相邻的表格单元格共享边框。在那个模型，插图的边框式值就像凹槽一样开头表现得像山脊。

避免html表中不必要的间距

4 个答案: