人生路漫漫其修远兮,且行切珍惜吧

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>斑马线表格</title>
 <style>
 *{
  margin: 0;
  padding: 0;
  /*清处浏览器默认设置*/
 }
 table{
  /*表格的外边距和大小*/
  margin: 10px 0 0 0;
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  /*collapse 表格单元格边框合并
   border-spacing 表格单元格间距为零
  */
 }
 caption{
  font: 30px "楷体";
  padding: 5px;
  /*表格标题*/
 }
 td{
  width: 32%;
  height: 50px;
  /*单元格大小*/
 }
 tbody td{
   border: 1px solid;
   /*表格主体的边框*/
 }
 thead{
  background-color: #A2A5A7;
  /*表格头部*/
 }
 tr:hover{
  background-color: #66D9EF;
  cursor:pointer;
  /*鼠标悬停在表格上时,表格的背景和鼠标的形状*/
 }
 table tbody tr:nth-child(even){
  background-color: #8F908A;
  box-shadow: inset 0 5px rgba(255,255,255,0.5);
  /*even为偶数行 odd为奇数行
    设置表格的主体部分偶数行的样式
    shadow 阴影  inset将外部阴影改为内部阴影
  */
 }
 thead tr th:first-child
 {
  /*表头部分th 第一个th左上角设置圆角*/
  border-radius: 15px 0 0 0;
 }
 thead tr td:last-child{
  /*最后一个单元格右上角设置圆角*/
  border-radius: 0 15px 0 0;
 }
 </style>
</head>
<body>
 <table>
 <caption>斑马线表格</caption>
 <thead>
  <tr>
   <th></th>
   <td></td>
   <td></td>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td></td>
  </tr>
 </tbody>
  <tfoot>
   <tr>
    <td></td>
    <td></td>
    <td></td>
   </tr>
  </tfoot>
 </table>
</body>
</html>
#简历怎么写##前端##测试##八卦##吐槽##交友##情感##职场#
全部评论

相关推荐

11-15 17:19
湖南大学 Java
成果成果成果果:这是哪个公司的hr,这么离谱吗,我没见过用性别卡技术岗的,身边女性同学拿大厂offer的比比皆是
点赞 评论 收藏
分享
拒绝无效加班的小师弟很中意你:求职意向没有,年龄、课程冗余信息可以删掉,需要提升项目经历。排版需要修改。
点赞 评论 收藏
分享
评论
点赞
收藏
分享
牛客网
牛客企业服务