如何：“用行分隔表格行” [英] How to: "Separate table rows with a line"

问题描述

我有一个包含表格行的基本HTML表格。我的目标是将这些表格行与可见的行分开（为了更好地阅读内容）。

我怎么能这样做？

解决方案

有几种方法可以做到这一点。单独使用HTML，您可以编写

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

或者，如果您希望边框位于第一行之上和最后一行之下，

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

尽管如此，这是相当不灵活的;你不能使线条点缀这种方式，或比一个像素厚。这就是为什么在过去，人们使用特殊的分隔行，只包含一些用于生成行的内容（它有点脏，特别是当需要制作行时，例如只有几个像素高的行，但这是可能的）。 p>

对于大多数人来说，现在人们使用CSS border 属性来达到目的。它非常简单并且跨浏览器。但请注意，要使行连续，您需要使用表中的 cellspacing = 0 属性来防止单元格之间的间距标记或CSS规则 table {border-collapse：collapse; } 。删除这样的间距可能需要在单元格内添加一些填充（最好是在CSS中）。

最简单的方法是使用

 < style> 
表{
 border-collapse：collapse; 
} 
 tr {
 border：solid; 
 border-width：1px 0; 
} 
< / style> 
  

这会在第一行之上和最后一行之下放置一个边框。为防止这种情况，请添加下面放到样式表中：

  tr：first-child {
 border-top：none; 
} 
 tr：最后一个孩子{
 border-bottom：none; 
} 
  

I have a basic HTML table which contains table rows. My goal is to separate those table rows with a visible line (for better readability of the content).

How could I do this?

解决方案

There are several ways to do that. Using HTML alone, you can write

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

or, if you want a border above the first row and below the last row too,

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

This is rather inflexible, though; you cannot e.g. make the lines dotted this way, or thicker than one pixel. This is why in the past people used special separator rows, consisting of nothing but some content intended to produce a line (it gets somewhat dirty, especially when you need to make rows e.g. just a few pixels high, but it’s possible).

For the most of it, people nowadays use CSS border properties for the purpose. It’s fairly simple and cross-browser. But note that to make the lines continuous, you need to prevent spacing between cells, using either the cellspacing=0 attribute in the table tag or the CSS rule table { border-collapse: collapse; }. Removing such spacing may necessitate adding some padding (with CSS, preferably) inside the cells.

At the simplest, you could use

<style>
table {
  border-collapse: collapse;
}
tr { 
  border: solid;
  border-width: 1px 0;
}
</style>

This puts a border above the first row and below the last row too. To prevent that, add e.g. the following into the style sheet:

tr:first-child {
  border-top: none;
}
tr:last-child {
  border-bottom: none;
}

这篇关于如何：“用行分隔表格行”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！