我有一个包含表格行的基本HTML表格。我的目标是用一条可见的线分隔这些表格行(为了内容更好的可读性)。我怎么能这么做?
mftmpeh81#
有几种方法可以做到这一点。单独使用HTML,您可以编写
<table border=1 frame=void rules=rows>
或者,如果您希望边框位于第一行上方和最后一行下方,
<table border=1 frame=hsides rules=rows>
然而,这是相当不灵活的;你不能用这种方式画出虚线,或者比一个像素更粗。这就是为什么过去人们使用特殊的分隔行,只包含一些用来画线的内容(这会有点脏,特别是当你需要画出几个像素高的行时,但这是可能的)。大多数情况下,人们现在使用CSS border属性来实现这个目的。它相当简单,而且可以跨浏览器使用。但是要注意,为了使行连续,需要防止单元格之间出现空格,可以使用table标签中的cellspacing=0属性,也可以使用CSS规则table { border-collapse: collapse; }。删除这样的空格可能需要添加一些填充(最好使用CSS)* 内 * 细胞。最简单的方法是
border
table
cellspacing=0
table { border-collapse: collapse; }
<style> table { border-collapse: collapse; } tr { border: solid; border-width: 1px 0; } </style>
这会在第一行的上方和最后一行的下方添加一个边框。为了防止出现这种情况,请在样式表中添加以下内容:
tr:first-child { border-top: none; } tr:last-child { border-bottom: none; }
xhv8bpkk2#
只需设置行的边框样式:
table tr { border-bottom: 1px solid black; } table tr:last-child { border-bottom: none; }
这里有一个fiddle。@pkyeck提到的编辑,第二种风格避开了最后一行下面的线,也许你正在寻找这个。
hlswsv353#
您可以使用border-bottom css属性。
border-bottom
table { border-collapse: collapse; } table tr { border-bottom: 1px solid black; } table tr:last-child { border: 0; }
<table> <tr> <td>1</td> <td>Foo</td> </tr> <tr> <td>2</td> <td>Bar</td> </tr> </table>
0md85ypi4#
你必须使用CSS。在我看来,当你有一张table,往往是好的与一个单独的线,每一边的线。请尝试以下代码:超文本:
<table> <tr class="row"><td>row 1</td></tr> <tr class="row"><td>row 2</td></tr> </table>
字符串CSS:
.row { border:1px solid black; }
再见安德里亚
s6fujrry5#
超文本标记语言
<table cellspacing="0"> <tr class="top bottom row"> <td>one one</td> <td>one two</td> </tr> <tr class="top bottom row"> <td>two one</td> <td>two two</td> </tr> <tr class="top bottom row"> <td>three one</td> <td>three two</td> </tr> </table>
中央支助组:
tr.top td { border-top: thin solid black; } tr.bottom td { border-bottom: thin solid black; } tr.row td:first-child { border-left: thin solid black; } tr.row td:last-child { border-right: thin solid black; }
**一个
mbskvtky6#
如果您不想使用CSS,请尝试在各行之间使用以下代码:
<tr> <td class="divider"><hr /></td> </tr>
干杯!
uxhixvfz7#
使用css设置row-element的样式:
border-bottom: 1px solid black;
u2nhd7ah8#
将colspan设置为列数,并根据需要设置背景色
<tr style="background: #aaa;"> <td colspan="2"></td> </tr>
8条答案
按热度按时间mftmpeh81#
有几种方法可以做到这一点。单独使用HTML,您可以编写
或者,如果您希望边框位于第一行上方和最后一行下方,
然而,这是相当不灵活的;你不能用这种方式画出虚线,或者比一个像素更粗。这就是为什么过去人们使用特殊的分隔行,只包含一些用来画线的内容(这会有点脏,特别是当你需要画出几个像素高的行时,但这是可能的)。
大多数情况下,人们现在使用CSS
border
属性来实现这个目的。它相当简单,而且可以跨浏览器使用。但是要注意,为了使行连续,需要防止单元格之间出现空格,可以使用table
标签中的cellspacing=0
属性,也可以使用CSS规则table { border-collapse: collapse; }
。删除这样的空格可能需要添加一些填充(最好使用CSS)* 内 * 细胞。最简单的方法是
这会在第一行的上方和最后一行的下方添加一个边框。为了防止出现这种情况,请在样式表中添加以下内容:
xhv8bpkk2#
只需设置行的边框样式:
这里有一个fiddle。
@pkyeck提到的编辑,第二种风格避开了最后一行下面的线,也许你正在寻找这个。
hlswsv353#
您可以使用
border-bottom
css属性。0md85ypi4#
你必须使用CSS。
在我看来,当你有一张table,往往是好的与一个单独的线,每一边的线。
请尝试以下代码:
超文本:
字符串
CSS:
再见
安德里亚
s6fujrry5#
超文本标记语言
中央支助组:
**一个
mbskvtky6#
如果您不想使用CSS,请尝试在各行之间使用以下代码:
干杯!
uxhixvfz7#
使用css设置row-element的样式:
u2nhd7ah8#
将colspan设置为列数,并根据需要设置背景色