如何在html表的两行之间划分一条线或空格

Question

我需要在两行之间给出空格或中断,这样我的页面看起来会很好.

如果你查看我的代码,我已经给了许多空行和列,以在表中的两行之间创建一个空格.

请说出任何其他适当的方法来在两行之间留出空间.

这是我的示例代码:

<form:form name="form" method="post" modelAttribute="Abatch">

 <table>
<tr>
    <td>Please enter your comments</td>
    <td><form:textarea id="textarea" style="width:150%;height:150%" path="Comments" size="255" readonly="false" /></td>
</tr>
<tr>
<tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</tr>
</tr>
<tr>     
   <td><input id="button1"   type="submit" name="submit" value="Approve"/></td>
   <td><input id="button4"  type="submit" name="submit" value="Reject"/></td>

  </tr>
</table>

Answer 1

试试这个:

<tr>
    <td>
        Row 1
    </td>
</tr>
<tr>
    <td>
        &nbsp;
        <!--you just need a space in a row-->
    </td>
</tr>
<tr>
    <td>
        Row 2
    </td>
</tr>

Answer 2

根据CSS盒子模型:

边距值不适用于表格行和表格单元格
请参阅:http://www.w3.org/TR/CSS2/box.html#margin-properties

填充和边框值不适用于表行但适用于表格单元格
请参阅:http://www.w3.org/TR/CSS2/box.html#padding-properties

快速修复是将填充添加到要分隔的行的顶部.

例如:http://jsfiddle.net/audetwebdesign/caXsZ/

示例HTML:

<table cellpadding="0" cellspacing="0" border="0">
    <tr class="row1">
        <td>Row One - 1</td>
        <td>Row One - 2</td>
    </tr>
    <tr class="row2">
        <td>Row Two - 1</td>
        <td>Row Two - 2</td>
    </tr>    
</table>

CSS:

td {
    border: 1px dotted blue;
}
tr.row2 td {
    padding-top: 40px;
}

如果要为表格单元格设置边框样式,可能需要在内容周围添加包装并根据设计细节应用边框.