贴上效果图:
贴上代码:
- <!doctype html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 大公司常见表格
- </title>
- <style type="text/CSS">
- * { margin: 0; padding: 0; } .bt-table { padding: 20px; } td { padding:
- 10px; } #tb1 tr { background-color: #fff; font: normal 14px/180% Georgia,Arial,Helvetica,sans-serif;
- } /* 奇数行样式 */ #tb1 tr:nth-child(even) { background-color: #dee1e6; } #tb1
- thead tr { background-color: #dee1e6; } #tb1 thead tr td{ border: 1px solid
- #b6b4b6; } #tb1 thead tr td{ border-left: none; } #tb1 thead tr td:first-child{
- border-left: 1px solid #b6b4b6; } #tb1 tbody tr td{ border-bottom: 1px
- solid #b6b4b6; }
- </style>
- </head>
- <body>
- <div class="bt-table">
- <table id="tb1" width="100%" cellspacing="0">
- <thead>
- <tr>
- <td width="50">
- 序列
- </td>
- <td>
- 主题
- </td>
- <td>
- 内容
- </td>
- <td>
- 链接
- </td>
- <td width="50">
- 操作
- </td>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- 1
- </td>
- <td>
- Sportswomen
- </td>
- <td>
- Achievement:After a 12-year wait, China's Women's Volleyball Team re-gained
- its spot on top of dias, winning gold at the 2016 Summer Olympics. The
- team are now regarded as national heroes, proudly carrying the flag of
- China's Olympic glory that first flew 30 years ago.
- </td>
- <td>
- Persistence
- </td>
- <td>
- 删除
- </td>
- </tr>
- <tr>
- <td>
- 2
- </td>
- <td>
- Profession:Model
- </td>
- <td>
- Achievement:As the first Chinese model to walk the Victoria's Secret runway
- and the first Asian model to make Forbes magazine's annual highest-paid
- models list, Liu has led three other Chinese girls to the 2016 Victoria's
- Secret Fashion Show, bringing a wave of Chinese chic to the fashion world.
- </td>
- <td>
- Persistence
- </td>
- <td>
- 删除
- </td>
- </tr>
- <tr>
- <td>
- 3
- </td>
- <td>
- Profession:Model
- </td>
- <td>
- Achievement:As the first Chinese model to walk the Victoria's Secret runway
- and the first Asian model to make Forbes magazine's annual highest-paid
- models list, Liu has led three other Chinese girls to the 2016 Victoria's
- Secret Fashion Show, bringing a wave of Chinese chic to the fashion world.
- </td>
- <td>
- Persistence
- </td>
- <td>
- 删除
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </body>
- </HTML>
大公司 (如华为) 常见的漂亮表格样式
来源: http://www.bubuko.com/infodetail-3085985.html