标题带背景图片的表格

栏目: Html · 发布时间: 5年前

核心属性

border-collapse: collapse 表格的边框会合并为一个单一的边框

tr:not(:last-child) 选择除了表格的最后一行

```
<table id=jaeger-specs>
```
```
<caption>机甲规格表</caption>
```
```
<thead>
```
```
<tr>
```
```
<th></th>
```
```
<th scope=col>国家
```
```
<th scope=col>高度<span> (米)</span>
```
```
<th scope=col>重量<span> (吨)</span>
```
```
</tr>
```
```
</thead>
```
```
<tbody>
```
```
<tr>
```
```
<th scope=row>Gipsy Danger
```
```
<td>美国
```
```
<td>79
```
```
<td>1980
```
```
</tr>
```
```
<tr>
```
```
<th scope=row>Striker Eureka
```
```
<td>澳大利亚
```
```
<td>76
```
```
<td>1850
```
```
</tr>
```
```
<tr>
```
```
<th scope=row>Crimson Typhoon
```
```
<td>中国
```
```
<td>76
```
```
<td>1722
```
```
</tr>
```
```
<tr>
```
```
<th scope=row>Coyote Tango
```
```
<td>日本
```
```
<td>86
```
```
<td>2312
```
```
</tr>
```
```
<tr>
```
```
<th scope=row>Cherno Alpha
```
```
<td>俄罗斯
```
```
<td>85
```
```
<td>2412
```
```
</tr>
```
```
</tbody>
```
```
</table>
```

```
#jaeger-specs {
```
```
border-collapse: collapse;
```
```
margin: 3rem auto;
```
```
}
```
```
#jaeger-specs caption {
```
```
margin-bottom: 2rem;
```
```
font-size: 2rem;
```
```
font-family: "SimHei", sans-serif;
```
```
}
```
```
#jaeger-specs td,
```
```
#jaeger-specs th {
```
```
text-align: center;
```
```
padding: 1.5rem;
```
```
}
```
```
#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.1rem;
```
```
border-right: 1px solid #222;
```
```
background-size: cover;
```
```
font-family: Agency, Arial, sans-serif;
```

text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);

```
}
```

#jaeger-specs tbody tr:nth-child(1) th {

background: url(https://pics.codecolor.cn/responsive-data-grid/gipsy-danger.jpg);

```
}
```

#jaeger-specs tbody tr:nth-child(2) th {

background: url(https://pics.codecolor.cn/responsive-data-grid/striker-eureka.jpg);

```
}
```

#jaeger-specs tbody tr:nth-child(3) th {

background: url(https://pics.codecolor.cn/responsive-data-grid/crimson-typhoon.jpg);

```
}
```

#jaeger-specs tbody tr:nth-child(4) th {

background: url(https://pics.codecolor.cn/responsive-data-grid/coyote-tango.jpg);

```
}
```

#jaeger-specs tbody tr:nth-child(5) th {

background: url(https://pics.codecolor.cn/responsive-data-grid/cherno-alpha.jpg);

```
}
```

#jaeger-specs tbody tr:not(:last-child) {

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

#jaeger-specs tbody td:not(:last-child) {

```
border-right: 1px solid #222;
```
```
}
```
```
#jaeger-specs tbody td {
```
```
background: hsl(195, 100%, 20%);
```
```
color: #fff;
```
```
}
```

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

创新者

[美] 沃尔特 · 艾萨克森 / 关嘉伟、牛小婧 / 中信出版社 / 2016-6 / 88.00

讲述了计算机和互联网从无到有的发展历程，并为我们生动地刻画出数字时代的创新者群像。在近200年的数字化进程中群星闪耀，艾萨克森从一个计算机程序的创造者、诗人拜伦之女埃达说起，细数了这一群站在科学与人文交叉路口的创新者，他们包括通用型电子计算机的创造者奠奇利、科学家冯·诺依曼、仙童半导体公司的“八叛逆”、天才图灵、英特尔的格鲁夫、微软的比尔·盖茨、苹果公司的乔布斯、谷歌的拉里·佩奇等。《创新......一起来看看《创新者》这本书的介绍吧!

码农工具

SHA 加密

SHA 加密工具

XML、JSON 在线转换

在线XML、JSON转换工具