Html 如何在html表的两行之间断开一行或空格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19009591/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to break a line or space in between two rows of the html table
提问by Yellow Flash
I need to give space or break between two rows, so that my page will looks good.
我需要在两行之间留出空间或中断，以便我的页面看起来不错。
if you look my code i had given many empty rows and column to make a space between two rows in the table.
如果你看我的代码，我已经给出了许多空行和列，以在表中的两行之间留出空间。
Please say any other proper way to give space between two rows.
请说出在两行之间留出空间的任何其他适当方式。
here is my sample code:
这是我的示例代码：
<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>
回答by MJ33
Try this:
尝试这个：
<tr>
<td>
Row 1
</td>
</tr>
<tr>
<td>
<!--you just need a space in a row-->
</td>
</tr>
<tr>
<td>
Row 2
</td>
</tr>
回答by Marc Audet
According to the CSS box model:
根据CSS盒模型：
margin values do not apply to table rows and table cells
See: http://www.w3.org/TR/CSS2/box.html#margin-properties
边距值不适用于表格行和表格单元格
请参阅：http: //www.w3.org/TR/CSS2/box.html#margin-properties
padding and border values do not apply to table rows but apply to table cells
See: http://www.w3.org/TR/CSS2/box.html#padding-properties
填充和边框值不适用于表格行，但适用于表格单元格
请参阅：http: //www.w3.org/TR/CSS2/box.html#padding-properties
A quick fix is to add padding to the top of the row that you want to separate.
快速解决方法是在要分隔的行的顶部添加填充。
For example: http://jsfiddle.net/audetwebdesign/caXsZ/
例如：http: //jsfiddle.net/audetwebdesign/caXsZ/
Sample HTML:
示例 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:
CSS：
td {
border: 1px dotted blue;
}
tr.row2 td {
padding-top: 40px;
}
If you want to style borders around your table cells, you may need to add wrappers around the content and apply borders depending on the design details.
如果要在表格单元格周围设置边框样式，则可能需要在内容周围添加包装器并根据设计细节应用边框。
回答by Charaf JRA
The correct way to give spacing for tables is to use cellpadding and cellspacing e.g.
为表格提供间距的正确方法是使用单元格填充和单元格间距，例如
<table cellpadding="4">
or using css :
或使用 css ：
<style type='text/css'>
table{ border-collapse: separate; }
table td { border-spacing: 1em; }
</style>
回答by Sudharsun
border spacing attribute has to be specified in CSS
table
{
border-collapse:separate;
border-spacing:10px 0px;
}
The above code set 10px spacing between the rows and 0px spacing between the columns
上面的代码设置行间距为10px，列间距为0px
回答by Gustavo Gondim
Set the marginattribute for a <tr>tag:
设置标签的margin属性<tr>：
<tr style="margin-top:10px;"></tr>
Or make the entire table with this style:
或者用这种风格制作整个表格：
<style>
table tr {
margin-top: 10px;
}
table tr:first-child {
margin-top: 0px; !important
}
</style>
回答by anand24
This can be achieved like this.
这可以像这样实现。
<tr>
<td> <br> </td> <!--The br tag did what i was looking for -->
</tr>
<tr>
<td> <br> </td> <!--The br tag did what i was looking for -->
</tr>
回答by Pukhraj soni
The solution worked for me is defining css properties at column level and defining colspan as the number of columns in the table
对我有用的解决方案是在列级别定义 css 属性并将 colspan 定义为表中的列数
Html -
html -
<tr class="border_bottom">
<td colspan="6"></td>
</tr>
CSS -
CSS -
tr.border_bottom td {
border-bottom: 1px solid #cccccc;
color: #707070;
}
table{
border-collapse: collapse;
}
