html – 如何:“用行分隔表行”

我有一个包含表行的基本HTML表。我的目标是用可见行分隔这些表行(为了更好的可读性)。

我该怎么做?

解决方法

有几种方法可以做到这一点。单独使用HTML,你可以写
<table border=1 frame=void rules=rows>

或者,如果您想要在第一行上方和最后一行下方的边​​框,

<table border=1 frame=hsides rules=rows>

这是相当僵化的;你不能使线条以这种方式点缀,或者比一个像素更粗。这就是为什么在过去人们使用特殊的分隔符行,只包含一些旨在产生行的内容(它变得有点脏,特别是当你需要制作行,例如只有几个像素高,但这是可能的)。

对于大多数情况,现在人们为此而使用CSS边框属性。这是相当简单和跨浏览器。但请注意,为了使线条连续,您需要防止单元格之间的间距,使用表标记中的cellspacing = 0属性或CSS规则表{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;
}

相关文章

操作步骤 1、进入elasticsearch的plugin,进入ik。进入config。 2、在config下面建立以.dic为后缀的字典...
lengend data数据中若存在&#39;&#39;,则表示换行,用&#39;&#39;切割。
代码实现 option = { backgroundColor: &amp;#39;#080b30&amp;#39;, tooltip: { trigger: &...
问题原因 原因在于直接在js中取的变量并复制给var变量。 于是就变成这样。 解决办法 var data = &#...
前言 最近做了一个调查问卷导出的功能,需求是将维护的题目,答案,导出成word,参考了几种方案之后,选...
对于很多人来说,用字符编码都是熟能生巧,而不清楚为什么是那样的字符编码,所以我在这列了一个表,翻...