zoukankan      html  css  js  c++  java
  • 表格线边框重复css解决方法

    1、td 的边框和table 的边框重叠

    .table { border-left:1px solid #dedede; border-top:1px solid #dedede;}

    .td { border-right:1px solid #dedede; border-bottom:1px solid #dedede;}

    table 只用左边框和上边框,每个td只有右边框和下边框,效果就是整个表格左、上边框是连续实线,右、下边框是延续td的边框所以是断断续续的

    解决方法:

    .table {border:1px solid #dedede; border-collapse:collapse;}

    .td {border:1px solid #dedede; } 橘色字体是关键,边框设置也不用分上下左右了,重叠的话会一个覆盖另一个

    firefox中:td的border覆盖table 的,IE中table 的border覆盖td的,我这里border颜色一样,无所谓了

    表格线常见问题:

    1.表格边框与表格单元格线的重叠。[采用border-collapse:collapse解决]

    2.嵌套表格与被嵌套表格边线重叠问题。[采用border-top|left|right|bottom解决]

    3.嵌套表格与被嵌套表格对不齐的问题。[采用table-layout: fixed;解决]

    4.border-collapse有两个属性,separate 和 collapse 。

    separate是默认属性,表格边框默认有1px 的间隙,在表格排版时代,设置好表格背景色,我们曾用它来挤出版块的外边框;

    collapse,是将表格边框的间隙去掉,这样给表格的td边框赋值时就不会产生双线框了。

    Demo:没有设置collapse属性的双线表格

  • 相关阅读:
    Docker基本命令及工作原理
    Docker安装
    linux命令
    MTPuTTy使用
    SpringBoot--swagger搭建、配置及使用
    idea使用技巧
    Idea插件
    IDEA开发工具使用 git 创建项目、拉取分支、合并分支
    git命令
    javbus爬虫-老司机你值得拥有
  • 原文地址:https://www.cnblogs.com/lihaishu/p/4349521.html
Copyright © 2011-2022 走看看