html行间跳两行,如何在html表格的两行之间打破行或空格

我需要在两行之间留出空间或中断，以便我的页面看起来很好。如何在html表格的两行之间打破行或空格

如果你看我的代码，我已经给了许多空的行和列来在表中的两行之间留出空间。

请说任何其他适当的方式给两行之间的空间。

这里是我的示例代码：

Please enter your comments

+2

您是否尝试过使用样式标记向行添加填充？您应该真正使用表格作为表格数据，因为它们的目的是。 –

+4

CSS是你的朋友。看起来你只是用''来提供布局。这通常不是一个好主意。如果您必须/将使用表格，请使用CSS样式来实现所需的布局。 –

A

回答

7

之间的行和0像素间距之间10px的间距根据CSS盒模型：

速战速决是填充添加到您想要分开行的顶部。

样本HTML：

Row One - 1	Row One - 2
Row Two - 1	Row Two - 2

CSS：

td {

border: 1px dotted blue;

}

tr.row2 td {

padding-top: 40px;

}

如果你想样式在你的表格单元格边框，您可能需要添加周围的包装内容并根据设计细节应用边框。

2013-09-25 16:22:43

+0

它的工作原理！谢谢 –

+2

很高兴帮助。请记住接受答案！ –

+0

它没有采取保证金。？为此提供解决方案 –

2

设置margin属性为

标签：

或者使这种风格对整个表：

table tr {

margin-top: 10px;

}

table tr:first-child {

margin-top: 0px; !important

}

2013-09-25 15:54:54

+0

这不起作用，CSS忽略表格行上的边距和填充。 –

4

的正确的方法来给表格的间距是使用cellpadding和cellspacing例如

或使用CSS：

table{ border-collapse: separate; }

table td { border-spacing: 1em; }

2013-09-25 15:54:55

+0

这不起作用，CSS忽略表格行上的边距和填充。 –

+0

谢谢，它的编辑 –

4

border spacing attribute has to be specified in CSS

table

{

border-collapse:separate;

border-spacing:10px 0px;

}

上面的代码设定的列

2013-09-25 15:57:56

Sudharsun

10

试试这个：

Row 1

Row 2

2014-05-27 19:57:50

MJ33

+0

完美！感谢分享.. –

1

这可以这样来实现。

2016-03-14 11:59:42

anand24