zoukankan      html  css  js  c++  java
  • html表格单元格添加斜下框线的方法

    一、分隔单元格的方法

    1、用“transform: rotate(-55deg);”把一条水平线旋转一定角度就成斜线了
    2、利用以下命令调整分割线位置等。

    :after

    :before  

    transform: rotate(-55deg);
    transform-origin: top;

    3、注意:加斜线的单元格的宽高需要时固定值,否则会乱掉。
    二、斜下框线效果及对应html代码:

    1、效果:

    1)未加斜下框线效果:

         
         

     2)加一根斜下框线效果:

         
         

    2、html代码:

    1)未加斜下框线效果:
    <table border="0">
    <tbody>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>

    <td>&nbsp;</td>
    </tr>
    </tbody>
    </table>
    2)加斜下框线效果:
    <style><!--
    table{
    border-collapse:collapse;
    }
    table,tr,td{
    border:1px solid black;
    }
    td{
    100px;/*长直角边,这里需要自己调整,根据自己的需求调整宽度*/
    height:75px;/*短直角边,这里需要自己调整,根据自己的需求调整高度*/
    position: relative;
    }
    td[class=first]:before{
    content: "";
    position: absolute;
    1px;
    height:200px;/*斜边,这里需要自己调整,根据td的宽度和高度*/
    top:0;
    left:0;
    background-color: black;
    display: block;
    transform: rotate(-55deg);/*长/斜对应角度,这里需要自己调整,根据线的位置*/
    transform-origin: top;
    }
    --></style>
    <table>
    <tbody>
    <tr>
    <td class="first">&nbsp;</td>   /*加class类原/<td/>改为/<td class=/"first/"/>*/
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>

    <td>&nbsp;</td>

    </tr>
    </tbody>
    </table>

    ------------------------------------------------------Tanwheey--------------------------------------------------

    爱生活,爱工作。

  • 相关阅读:
    Warning:detected "cgroupfs" as the Docker cgroup driver. The recommended driver is "systemd".
    Ubuntu16.04安装K8s步骤和踩坑记录【不错】
    修改主机名(/etc/hostname和/etc/hosts区别)
    Windows10内置Linux子系统初体验
    Docker Swarm常用命令
    Docker Swarm集群部署
    Docker容器CPU、memory资源限制
    Docker监控容器资源的占用情况
    修改Docker容器启动配置参数
    sort-colors——排序3种数字
  • 原文地址:https://www.cnblogs.com/Tanwheey/p/11646952.html
Copyright © 2011-2022 走看看