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>
  • 相关阅读:
    nginx启动
    java中有三种移位运算符
    easyUI属性汇总
    rose学习
    eclipse 启动到load workbench 后静止
    nvl函数
    Io 异常: Socket closed
    编译错误和运行时错误
    java 二进制编码
    MyFormat 幫助類
  • 原文地址:https://www.cnblogs.com/lpzpp/p/11448183.html
Copyright © 2011-2022 走看看