html 如何使用线分隔表行

eagi6jfj  于 2022-12-16  发布在  其他
关注(0)|答案(8)|浏览(133)

我有一个包含表格行的基本HTML表格。我的目标是用一条可见的线分隔这些表格行(为了内容更好的可读性)。
我怎么能这么做?

mftmpeh8

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)* 内 * 细胞。
最简单的方法是

<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;
}
xhv8bpkk

xhv8bpkk2#

只需设置行的边框样式:

​table tr {
    border-bottom: 1px solid black;
}​

table tr:last-child { 
    border-bottom: none; 
}

这里有一个fiddle
@pkyeck提到的编辑,第二种风格避开了最后一行下面的线,也许你正在寻找这个。

hlswsv35

hlswsv353#

您可以使用border-bottom css属性。

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>
0md85ypi

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; 
}

再见
安德里亚

s6fujrry

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; }​

**一个

mbskvtky

mbskvtky6#

如果您不想使用CSS,请尝试在各行之间使用以下代码:

<tr>
    <td class="divider"><hr /></td>
    </tr>

干杯!

uxhixvfz

uxhixvfz7#

使用css设置row-element的样式:

border-bottom: 1px solid black;
u2nhd7ah

u2nhd7ah8#

将colspan设置为列数,并根据需要设置背景色

<tr style="background: #aaa;">
 <td colspan="2"></td>
</tr>

相关问题