实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用CSS制作一张带有四个圆角的各大***铝锭价格表</title> <link rel="stylesheet" href="/css/style.css"> <style type="text/css"> </style </head> <body> <!--表格开始--> <table> <!-- 标题--> <caption>9月6日各大***铝锭价格表 <h6>单位:元/吨</h6> </caption> <thead> <tr> <th>***</th> <th>最低</th> <th>最高</th> <th>均价</th> <th>涨跌</th> </tr> </thead> <!-- 主体--> <tbody> <tr> <td>长江现货***</td> <td>14400</td> <td>14440</td> <td>14420</td> <td>+20</td> </tr> <tr> <td>上海现货***</td> <td>14400</td> <td>14440</td> <td>14420</td> <td>+20</td> </tr> <tr> <td>广东南储***</td> <td>14420</td> <td>14520</td> <td>14470</td> <td>+20</td> </tr> <tr> <td>南海有色现货***</td> <td>14710</td> <td>14810</td> <td>14760</td> <td>+20</td> </tr> <tr> <td>99.7%华通现货***</td> <td>14400</td> <td>14440</td> <td>14420</td> <td>+20</td> </tr> <tr> <td>上海期货***</td> <td>14360</td> <td>14425</td> <td>-----</td> <td>----</td> </tr> </tbody> <!--底部--> <tfoot> <tr> <td>中铝***</td> <td>华东:14430</td> <td>华南:14490</td> <td>西南:14360</td> <td>中原:14340</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
/*表格开始*/ table { border-collapse: separate; border-spacing: 0; width: 800px; margin: 30px auto; } table caption { font-weight: bolder; font-size: 1.6rem; margin-bottom: 10px; } th, td { text-align: center; padding: 10px; font-size: 0.8rem; box-sizing: border-box; } table thead>tr:first-of-type { background-color: lightgreen; list-style-type: decimal; } table thead>tr:nth-last-of-type(5) { background-color: lightgreen; list-style-type: decimal; } /*给主体一个背景色,先table然后主体tody下的tr第一行,td第一轮用类选择器*/ table tbody>tr:nth-last-of-type(3)>td:nth-last-of-type(5) { background-color: lightslategrey; } /*选择tbody主体倒数tr第3行,td第2列0.00做出背景颜色醒目显示*/ table tbody>tr:nth-last-of-type(3)>td:nth-last-of-type(2) { background-color: lightcoral; } /*选择tbody主体倒数tr第4行,td第2列0.00做出背景颜色醒目显示*/ table tbody>tr:nth-last-of-type(3)>td:nth-last-of-type(1) { background-color: lightcoral; } /*底部背景*/ table tfoot>tr:last-of-type { background-color: #666666; color: white; overflow: hidden; } table { box-shadow: 2px 2px 2px #888888; position: relative; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } tbody td { border: 1px solid #999999; overflow: hidden; } table thead th { border: 1px solid #999999; } table tfoot td { border: 1px solid #999999; } table th:first-of-type { border-top-left-radius: 20px; } table th:last-of-type { border-top-right-radius: 20px; } table tfoot td:first-of-type { border-bottom-left-radius: 20px; } table tfoot td:last-of-type { border-bottom-right-radius: 20px; }
运行实例 »
点击 "运行实例" 按钮查看在线实例
这些名字太长我根本记不住,需要时只能看手册了,对我而言基本也很少用到..