zoukankan      html  css  js  c++  java
  • html css 设置表格单元格横线

    html代码

           <table class="table">
            <thead>
                <tr>
                     <th width="20%" class="line">
                        <span>参数</span>
    		    <span>参数</span>
                    </th>
                    <th>参数</th>
                    <th>参数</th>
                    <th>参数</th>
                    <th>参数</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>XX</td>
                    <td></td>
                    <td>≥20%</td>
                    <td>参数</td>
                    <td>参数</td>
                </tr>
                
            </tbody>
        </table>
    

    CSS代码

     /*模拟对角线*/
    .line {
     background: #234390 url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=) no-repeat 100% center;
    }
    
    .line span:first-child{
        display: inline-block;
        position: relative;
        bottom: -12px;
        left:-10px;
    }
    
    .line span:last-child{
        display: inline-block;
        position: relative;
        top:-10px;
        right: -10px;
    }
    
    

    说明

    PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=
    
    #其实是base64加密后的代码,解密后如下:
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><line x1="0" y1="0" x2="100%" y2="100%" stroke="black" stroke-width="1"/></svg>
    代码中的black是颜色,支持16进制颜色编码,修改颜色后,重新base64加密后替换原来的加密代码即可。
    
  • 相关阅读:
    web框架基础
    前端基础之DOM和jQuery
    前端基础之JavaScript
    前端基础之CSS
    福州大学W班-助教总结
    福州大学W班-个人最终成绩统计
    福州大学W班-Beta冲刺评分
    福州大学W班-alpha冲刺评分
    福州大学W班-团队作业-随堂小测(同学录)成绩
    福州大学W班-需求分析评分排名
  • 原文地址:https://www.cnblogs.com/lph970417/p/12910603.html
Copyright © 2011-2022 走看看