摘要:<head> <title>表格</title> <style type="text/css"> table { &n
<head>
<title>表格</title>
<style type="text/css">
table
{
border-collapse: collapse;
margin: 0 auto;
text-align: center;
}
table td, table th
{
border: 1px solid #cad9ea;
color: #666;
height: 30px;
}
table thead th
{
background-color: #CCE8EB;
width: 100px;
}
table tr:nth-child(odd)
{
background: #fff;
}
table tr:nth-child(even)
{
background: #F5FAFA;
}
</style>
</head>
<body>
<table width="90%" class="table">
<caption>
<h2>
車間能源消耗比例</h2>
</caption>
<thead>
<tr>
<th>
車間
</th>
<th>
產(chǎn)量
</th>
<th>
電量
</th>
<th>
單耗
</th>
</tr>
</thead>
<tr>
<td>
109
</td>
<td>
13
</td>
<td>
1.34
</td>
<td>
213
</td>
</tr>
<tr>
<td>
109
</td>
<td>
13
</td>
<td>
1.34
</td>
<td>
213
</td>
</tr>
<tr>
<td>
109
</td>
<td>
13
</td>
<td>
1.34
</td>
<td>
213
</td>
</tr>
<tr>
<td>
109
</td>
<td>
13
</td>
<td>
1.34
</td>
<td>
213
</td>
</tr>
</table>
</body>
</html>
演示地址 -> http://47.107.64.136/CSS/3/
批改老師:天蓬老師批改時(shí)間:2019-01-13 09:14:01
老師總結(jié):寫得非常棒, 選擇器用得也非常的優(yōu)雅, 如果再用點(diǎn)單元格合并, 做的更復(fù)雜點(diǎn)更好