zoukankan      html  css  js  c++  java
  • table标签修改tr,td标签的行距

    修改tr标签的行距,tbale标签的td标签间距

    1. 看如下Css文件的代码,其都没有table的tr行距产生效果
    tr{
        margin-top: 10px;
        padding: 10px;
    }
    td{
        margin-left: 2px;
    }

    这个设置其实,会没有效果的,原因就是对于table来说,它有一个属性值会设置是否当成一个整体来看,且其有设置table元素间距行距的属性。

    1. border-collapse 属性设置表格的边框是否被合并为一个单一的边框
    属性值作用描述
    separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
    collapse 如果设置的话,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
    inherit 从父元素继承 border-collapse 属性的值,大多数为collapse
    1. border-collapse属性加上border-spacing属性就可以设置tr标签行间距,和td标签的间距
    <table style="border-collapse:separate; border-spacing:0px 10px;">
        <tr>
            <td>不等风雨,只等你</td>
            <td>汝,知否?</td>
        </tr>
        <tr>
            <td>春风十里不如你</td>
            <td>汝,知否?</td>
        </tr>
        <tr>
            <td>漂洋过海来看你</td>
            <td>汝,知否?</td>
        </tr>
    </table>

    border-spacing:2px 5px;第一个参数代表td的间距,第二个参数代表tr的行距。

  • 相关阅读:
    生产环境elk
    命令行操作es(转)
    makedown在线生成工具
    网站渗透测试工具zap2docker-stable
    ansible常用单模块
    程序员应该怎样和领导相处(转)
    Css设置毛玻璃
    tar.gz 文件解压
    Ubuntu:命令行安装可视化界面
    汇编语言开发总结
  • 原文地址:https://www.cnblogs.com/daofaziran/p/11608172.html
Copyright © 2011-2022 走看看