zoukankan      html  css  js  c++  java
  • 在HTML中显示带斜线的表格

    <!DOCTYPE html>
    <html lang="zh">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    </head>
    <style type="text/css">
    table{
    border-collapse:collapse;
    }
    table,tr,td{
    border:1px solid black;
    }
    td{
    width:150px;/*这里需要自己调整,根据自己的需求调整宽度*/
    height:50px;/*这里需要自己调整,根据自己的需求调整高度*/
    position: relative;
    }
    td[class=first]:before{
    content: "";
    position: absolute;
    width: 1px;
    height:159px;/*这里需要自己调整,根据td的宽度和高度*/
    top:0;
    left:0;
    background-color: black;
    display: block;
    transform: rotate(-71.5deg);/*这里需要自己调整,根据线的位置*/
    transform-origin: top;
    }
    
    </style>
    <body>
    <table>
    <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
    </tr>
    <tr>
    <td class="first"></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    </table>
    </body>
    </html>
  • 相关阅读:
    礼品卡导入可用
    mysql
    初级运维工程师面试题总结
    mysql聚合函数
    去任何一个公司的思想
    mysql数据库引擎
    导入MyEclipse项目乱码
    poj 1743 后缀数组 求最长不重叠重复子串
    hdu 1011 树形dp+背包
    poj 2342 && hdu 1520 树形dp
  • 原文地址:https://www.cnblogs.com/lpzpp/p/11448183.html
Copyright © 2011-2022 走看看