HTML ui li表格布局 8月14日

<!DOCTYPE html>
<html>
<head>
 <title>购物清单</title>
 <meta charset="utf-8">
 <script type="text/javascript"></script>
 <style type="text/css">
  table{
            border-collapse: collapse; 折叠表格线
            width: 700px;
            text-align: center;
            margin: 20px auto;
  }
  table caption 
     {
            font-size: 2rem;
            font-weight: bolder;
            color:#666;
            margin-bottom: 20px;
  }
       table,th,td{
             border: 1px solid #666;
       }
       table tr:first-child{
               background: yellow;
       }
       table tr:hover{
               background: #efefef;
               color: coral;
       } 
        
       table tr td img{
              padding: 5px;
              border-radius: 10px;
       }
       table tr td a{
          /*去下环线*/
          text-decoration-line:none;         
          width: 140px;
          height: 40px;
          padding: 5px;
          border: 1px solid black;
          background-color: white;
          color: black;
          border-radius: 8px;

       }
    table tr td a:hover{
             background-color: black;
             color:white;
    }
相关文章
