好看的table css样式
来源:互联网 发布:二战历史书籍 知乎 编辑:程序博客网 时间:2024/04/29 21:52
漂亮的table表格样式css源码漂亮的table表格样式css源码
<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> 产量 </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> <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>
0 0