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表格去除網格線
![Java小案例——随機數猜測随機數猜測[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)