表列的尺寸会根据所包含的内容大小而变化，通过 table-layout: fixed，可以根据列标题的宽度来规定列的宽度，然后适当地处理它们的内容。
/* spacing */
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
border: 3px solid purple;
}
thead th:nth-child(1) {
width: 30%;
}
thead th:nth-child(2) {
width: 20%;
}
thead th:nth-child(3) {
width: 15%;
}
thead th:nth-child(4) {
width: 35%;
}
th,
td {
padding: 20px;
}
这就是为什么使用了thead th:nth-child(n) 选择了四个不同的标题 (:nth-child) 选择器（“选择第 n 个子元素，它是一个顺序排列的<th>元素，且其父元素是<thead>元素”）并给定了它们的百分比宽度。
进行字体的修改，link加在html的<head>标签
<link
href="https://fonts.googleapis.com/css?family=Rock+Salt"
rel="stylesheet"
type="text/css" />
在css文件里添加新的样式
/* typography */
html {
font-family: "helvetica neue", helvetica, arial, sans-serif;
}
thead th,
tfoot th {
font-family: "Rock Salt", cursive;
}
th {
letter-spacing: 2px;
}
td {
letter-spacing: 1px;
}
tbody td {
text-align: center;
}
tfoot th {
text-align: right;
}新的样式：
继续添加图形和颜色：
/* 图形和颜色 */
thead,
tfoot {
background: url(leopardskin.jpg);
color: white;
text-shadow: 1px 1px 1px black;
}
thead th,
tfoot th,
tfoot td {
background: linear-gradient(to bottom, rgb(0 0 0 / 10%), rgb(0 0 0 / 50%));
border: 3px solid purple;
}
将一个background-image添加到<thead>和<tfoot>，并将页眉和页脚的所有文本颜色color更改为白色 (并给它一个text-shadow)。
为<th>和 <td>添加了一个线性渐变，在页眉和页脚中添加了一个漂亮的纹理，同时也为这些元素提供了一个明亮的紫色边框。
有多个嵌套的元素是很有用的，这样就可以将样式层叠在一起。我们可以通过设置多组背景图像属性值来在<thead>和 <tfoot>元素上同时使用背景图像和线性渐变。
实现斑马条纹（zebra stripes）——通过改变不同数据行的颜色，使表中交替行不同的数据行可以更容易地进行解析和读取。
tbody tr:nth-child(odd) {
background-color: #ff33cc;
}
tbody tr:nth-child(even) {
background-color: #e495e4;
}
tbody tr {
background-image: url(noise.png);
}
table {
background-color: #ff33cc;
}
:nth-child选择器用于选择特定的子元素。它也可以用一个公式作为参数，来选择一个元素序列。公式2n-1会选择所有奇数的子元素 (1、3、5 等)，而公式2n会选择所有偶数的子元素 (2、4、6 等等)。在代码中使用了odd和even的关键字，这与前面提到的公式作用完全相同。给奇数行和偶数行不同的 (醒目的) 颜色。
为所有的行添加了一个重复的噪点背景色块（一个半透明的.png，有一点视觉上的扭曲）来提供一些纹理。最后，给整个表格提供了一个纯的背景颜色，这样浏览器不支持:nth-child选择器仍然有它们的正文行的背景。
最后一点处理——样式化标题：
caption {
font-family: "Rock Salt", cursive;
padding: 20px;
font-style: italic;
caption-side: bottom;
color: #666;
text-align: right;
letter-spacing: 1px;
}
caption-side属性被赋予了一个bottom的值。这就导致标题被放置在表格的底部，与其他声明一起提供了最后的外观。
Comments NOTHING