html表格去除网格线

Previously I’ve shown HTML & CSS patterns for various kinds of tables, including designs with zebra stripes, rounded corners and scrolling data. Things get slightly more complex when we turn to “data grids”: tables that feature headers for both column and row information.

以前，我已经为各种表显示了HTML和CSS模式，包括带有斑马条纹，圆角和滚动数据的设计 。 当我们转向“数据网格”时，事情变得稍微复杂一些：表具有列和行信息的标题。

For this example I’ll use technical specifications of the giant Jaeger fighting mechs in Guillermo del Toro’s Pacfic Rim because, well, why the heck not.

在此示例中，我将使用吉列尔莫·德尔·托罗(Guillermo del Toro)的Pacfic Rim中巨型Jaeger战斗机的技术规格，因为，那么，为什么不这样做。

A “data grid” table, as I define it, has headers for both rows and columns, with no visible cell in the top left corner. Like most challenges in web development, the key is employing the right markup, with tags that enhance accessibility:

正如我定义的那样，“数据网格”表具有行和列的标题，左上角没有可见的单元格。 像网络开发中的大多数挑战一样，关键是采用正确的标记，并使用具有增强可访问性的标签：

<table id="jaeger-specs"><caption>Jaeger Technical Specifications</caption><thead><tr><th></th><th scope="col">Country<th scope="col" >Height<span> (meters)</span> <th scope="col" >Weight (tonnes)</span></thead><tbody><tr><th scope="row">Gipsy Danger<td>United States<td>79<td>1980<tr><th scope="row" >Striker Eureka<td>Australia<td>76<td>1850<tr><th scope="row">Crimson Typhoon<td>China<td>76<td>1722<tr><th scope="row">Coyote Tango<td>Japan<td>86<td>2312<tr><th scope="row">Cherno Alpha<td>Russia<td>85<td>2412</tbody>
</table>

I am using scope to signify the role table header cells play – i.e. whether they are headers for rows or columns – together with HTML5 shortcuts. Note that despite the use of shortcuts the very first table header cell has a closing tag: this will prove important in applying the CSS to come.

我正在使用scope来表示表头单元格所扮演的角色，即它们是行标题还是列头，以及HTML5快捷方式 。 请注意，尽管使用了快捷方式，但第一个表格标题单元格仍带有一个结束标记：这将在应用CSS时被证明很重要。

The selectors I’m using in the stylesheet, which include :not and :empty, are deliberately advanced. It’s entirely possible to create this same table appearance using more traditional fare, such as classes, but my goal is to use the most efficient CSS code possible. A particular issue to avoid is doubling up of borders: you don’t want one cell wall in the table to appear thicker than the others due to a border on both it and a neighbouring element. To that end:

我在样式表中使用的选择器(包括:not和:empty )是有意改进的。 完全有可能使用更传统的方式(例如类)来创建相同的表格外观，但我的目标是使用尽可能高效的 CSS代码。 要避免的一个特殊问题是边框加倍：您不希望表中的一个单元格壁由于相邻单元格上都带有边框而显得比其他单元格更厚。 为此：

#jaeger-specs {border-collapse: collapse;margin: 0 auto;
}
#jaeger-specs td,#jaeger-specs th { text-align: center;padding: 1rem;
}
#jaeger-specs th[scope] {color: #fff;background-color: #000;font-weight: normal;
}
#jaeger-specs tbody { border: 1px solid #222;
}
#jaeger-specs tbody th,#jaeger-specs tbody th + td { text-align: left;font-weight: normal;
}
#jaeger-specs tbody th {font-size: 1.4rem;border-right: 1px solid #222;background-size: cover;font-family: Agency, sans-serif;text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}

The central body of the table has a border all the way around it. The table header cells for the rows and those immediately adjacent to them are left-aligned, with a border between them. The content of all other cells is centered.

桌子的中央始终围绕着边框。 行和紧邻行的表标题单元格左对齐，并在它们之间加边框。 所有其他单元格的内容都居中。

#jaeger-specs tbody tr:nth-child(1) th {background: url(gipsy-danger.jpg);
}
#jaeger-specs tbody tr:nth-child(2) th {background: url(striker-eureka.jpg);
}
#jaeger-specs tbody tr:nth-child(3) th {background: url(crimson-typhoon.jpg);
}
#jaeger-specs tbody tr:nth-child(4) th {background: url(coyote-tango.jpg);
}
#jaeger-specs tbody tr:nth-child(5) th {background: url(cherno-alpha.jpg);
}

Rather than identifying each row with a class or id, I’m simply counting where it is in the body of the table to apply an appropriate background image. This has the advantage of keeping markup light, but contains the drawback that changing the order of the rows will mean a small rewrite of the CSS.

我没有用class或id标识每一行，而是简单地计算它在表主体中的位置以应用适当的背景图像。 这具有保持标记较少的优点，但是具有缺点，即更改行的顺序将意味着对CSS的少量重写。

#jaeger-specs tbody tr:not(:last-child) {border-bottom: 1px solid #222;
}

Every row in the table except the last one has a border on its bottom edge.

表格中除最后一行外 ，每一行的底边都有边框。

#jaeger-specs thead th[scope] { border: 1px solid #222;border-bottom: none;
}

Every table header cell with a scope attribute has a border on all sides, with the border on the bottom cancelled with a separate rule.

每个具有scope属性的表标题单元格的所有边都有边框，底部的边框被单独的规则取消。

#jaeger-specs tbody td:not(:last-child) {border-right: 1px solid #222;
}

#jaeger-specs tbody td { background: hsl(195, 100%, 30%);color: #fff;
}

All the data cells in the table have a background color specified in HSL. Every cell, with the exception of the last in each row, has a border on its right side.

表中的所有数据单元格均具有HSL中指定的背景色。 除了每行的最后一个单元格外，每个单元格的右侧都有边框。

That’s a data grid, probably the most complex table most web designers will encounter in day-to-day development. It’s by no means the last thing we can do with tables, as you’ll see in articles to come.

那是一个数据网格，可能是大多数Web设计人员在日常开发中会遇到的最复杂的表。 正如您将在以后的文章中看到的那样，这绝不是表可以做的最后一件事。

翻译自: https://thenewcode.com/710/HTML-Table-Patterns-Data-Grids

html表格去除网格线