精华内容
下载资源
问答
  • td边框
    千次阅读
    2021-06-20 02:58:07

    使用css将table td边框合并为细边框2017-12-13 22:07

    还记得第一次使用table的时候,无论怎么弄,边框都不是自己想要的效果。

    因为只想让框边成为一条细线,当时就在想有这么难吗?

    不过后来还是解决了,今天突然想起,就简要的写一下分享出来。

    希望对遇到这样问题的小伙伴有所帮助。

    对于这个问题,有一个俗语叫做“table边框合并”。

    最主要就是用到border-collapse: collapse;这段代码。 html代码

    table{

    margin: 0 auto;

    width: 300px;

    border:1px red solid;

    }

    th,td {

    text-align: center;

    border: 1px blue solid;

    }

    新闻标题指数访问量
    千万劳斯莱斯被撞29343688
    老师卧底揭校园贷39661098
    学生被学姐骗传销21159168

    我们将上面的css代码中table样式里加入border-collapse: collapse;就可以了。

    更多相关内容
  • table-table 与 td 边框重叠问题

    千次阅读 2021-01-14 09:52:52
    同时用样式表为 table、td 指定了边框后,可能会发生重叠,这取决于 border-collapse。FF 结果如下:左边是未指定 border-collapse 的(默认为 separate)。右边是指定了 border-collapse 为 collapse 的。IE 结果如下...

    同时用样式表为 table、td 指定了边框后,可能会发生重叠,这取决于 border-collapse。

        
        

    FF 结果如下:

    左边是未指定 border-collapse 的(默认为 separate)。

    右边是指定了 border-collapse 为 collapse 的。

    IE 结果如下:

    左边是未指定 border-collapse 的(默认为 separate)。

    右边是指定了 border-collapse 为 collapse 的。

    兼容性

    可以看出在发生重叠时,Firefox 是用 td 覆盖 table 的,而 IE 是用 table 覆盖 td 的。

    表格线常见问题:

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

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

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

    展开全文
  • table边框测试隐藏右边框隐藏左边框隐藏上边框隐藏下边框显示右边框显示左边框显示上边框显示下边框右边框显示细虚线下边框显示粗虚线上边框显示两条线左边框显示点效果如下:.表格中边框的显示只显示上边框 只显示...

    今天给大家分享一篇关于HTMLtable各种边框效果实现的文章,内容主要介绍了在HTML利用table设置边框的各种操作,有需要的朋友可以参考一下。

    table边框测试
    隐藏右边框隐藏左边框
    隐藏上边框隐藏下边框
    显示右边框显示左边框显示上边框显示下边框
    右边框显示细虚线下边框显示粗虚线上边框显示两条线左边框显示点

    效果如下:

    cc254fca3fd0b8bb0fdfc24503630316.png

    .表格中边框的显示

    只显示上边框

    只显示下边框

    只显示左、右边框

    只显示上、下边框

    只显示左边框

    只显示右边框

    不显示任何边框

    .表格的分隔线可以隐藏

    sadadsaddsaasd
    adsasdadsasds

    table width=1 就已经把宽度设置为 1 了

    我们面临的问题是这样的,每一个 td 边线都是 1px,table 边线也是 1px。那么当两个td相邻的时候,因为每个 td 边线都是1,所以靠进的时候边线的“宽度和”就是 1+1=2。当 td 和 table 相邻时,同样。

    collapse :  相邻边被合并

    邻边被合并!以前我说的 1+1=2 就是因为 td 和td之间,td 和table 之间相邻边的问题。默认时相邻边没有合并,所以就是

    1+1=2。现在我们使用 border-collapse:collapse把我们合并了,所以宽度还是 1px。也就是出现细线边框了

    设置Table的细边框通常有这么几种方式:

    1、设置边框的BORDER=0 、cellspacing=1,设置Table的背景色为所要的边框色,再设置所有的td背景色为白色,这样细边框就显露出来了。这个方法有些邪气,看似不太正宗,但是也能达到效果,条条大路通罗马嘛!

    再来看看第二种方法:

    2、设置BORDER=0,再通过CSS,给Table加上1px的border-top,border-left,然后再设置所有的td的border-right,border-bottom,这样也能达到所要的效果。可见CSS很是强大啊。

    今天在实践过程中发现,以上两种方式生成的HTML在Word中打开则发生问题,不能达到预期效果。怎么办呢!?

    下面介绍一种更为简便有效的方法:

    3、设置table的CSS为{border-collapse:collapse;border:none;},再设置td的CSS为{border:solid #000 1px;},大功告成!而且Word也能认出这种设置。

    第三种方法最好,我也是在导出word时,很多css失效的情况下,找到了这个解决办法!

    相关推荐:

    展开全文
  • 表格td边框可左右拖动的实例

    热门讨论 2012-06-30 15:42:06
    当显示的table宽度受限制固定宽度时,表格的展示列又很多的时候,如何更好地处理并展示,可下载资源查看,可拖动表格,表格可左右拖动,表格td边框可以左右拖动,表格里的内容可以很好的显示。
  • table中的th、td边框失效

    千次阅读 2018-03-23 16:18:21
    问题重现:table,设置边框1px solid #ddd,根据th、td,设置不同边框谷歌浏览器正常,火狐浏览器表格边框,均只显示左、上边框解决办法: table, tr, td, th, thead, tbody { position: static;}解决过程:走了很...

    问题重现:

    table,设置边框1px solid #ddd,根据th、td,设置不同边框

    谷歌浏览器正常,火狐浏览器表格边框,均只显示左、上边框


    解决办法:

       table, tr, td, th, thead, tbody {
         position: static;
    }


    解决过程:

    走了很多弯路

    1)第一反应是width不够,于是尝试给元素增加width。无效

    2)发现,如果设置极端些,比如border-right-width:20px,会显示边框,但是在td右侧只有一条线,width为20排序,高度为1px,于是尝试给元素增加height、line-height。无效

    3)border-collapse属性。设置了border-collapse:collapse。无效

    4)position:relative。搜到博客《td标签上的position:relative属性td边框在各浏览器中的兼容性问题》(此为转载,未标明原作者http://blog.sina.com.cn/s/blog_6b2fcbbc0102w52a.html)。据此改动css代码。成功。



    参考:

    [1]. 陆远. RE2007: 各浏览器解决表格边框冲突的方式存在差异[EB/OL]. http://www.w3help.org/zh-cn/causes/RE2007.

    [2]. 陆远. BX3006: 各浏览器对 TABLE、TH、TD 元素的 bordercolor 属性的处理有差异[EB/OL]. http://www.w3help.org/zh-cn/causes/BX3006.

    展开全文
  • 主要介绍了让Table的TD边框而Table右左没有边框的CSS样式,需要的朋友可以参考下
  • td 边框加粗

    千次阅读 2015-09-16 15:44:50
     <td width="18%"class="leftTd rightTd topTd bottomTd">d</td>      <td class="leftTdbottomTd">3</td>  <td class="leftTdbottomTd"> </td>  <td class="leftTdbottomTd"> </...
  • 去除td边框

    千次阅读 2019-06-11 14:57:56
    .tg .borderNone{border:none} .tg .borderNoneL{border-left-width:0px;border-top-width: 0px} .tg .borderNoneB{border-bottom-width:0px} ...
  • html table td边框效果

    2019-09-26 02:25:08
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"><...<head><title>table边框测试</title></head> <...
  • 指定了背景颜色,但tr的背景颜色与td边框重叠.它是正常的,而t样式的顶部显示了tr样式吗?这两个问题是:>所有带有class =“ref”的td应该正确显示左右两个2px.ann和.tbx行中的边框(设置tr背景颜色时不是这种情.....
  • 表格所有td添加边框

    2021-08-18 16:34:02
    .td{border:solid #add9c0; border-width:0px 1px 1px 0px; padding:10px 0px;} .table{border:solid #add9c0; border-width:1px 0px 0px 1px;} 2、 <table border="1" class="contentTable"> </table&...
  • 让 table 的 table td边框合并的方法

    万次阅读 2014-12-27 16:08:24
    1 table{ border-collapse: collapse; border: none; } table, td{ border:solid 1px #A9CBEE; }
  • 隐藏右边框 ...隐藏上边框 隐藏下边框 显示右边框 显示左边框 显示上边框 显示下边框 右边框显示细虚线 左边框显示粗虚线 上边框显示两条线 下边框显示点 下边框虚线
  • td边框

    2012-11-16 10:14:13
    同时用样式表为 table、td 指定了边框后,可能会发生重叠,这取决于 border-collapse。 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &...
  • td 无内容显示边框

    2019-04-16 01:02:18
    td无内容显示边框.rar,td无内容显示边框.html
  • 比如这样一个CSS.td3{font-size:14px;color:#FFFFFF;background-color:#000000;BORDER-RIGHT:#f6f6f61pxsolid;//显示右边框为1px,如果不想显示就为0...//显示上边框为1px,如果不想显示就为0pxBORDER-LEFT:#f9f9f...
  • td为空时怎样显示其边框发布时间:2009-01-10 21:36:12 作者:佚名 我要评论之前总结了下如何用 css 来实现 table 的 border + bordercolordark + bordercolorlight 的边框明暗效果,然后有网友问我为什么他写了一...
  • table 表格去掉td边框和间隙
  • IE浏览器下td边框消失

    2019-08-08 16:36:34
    IE浏览器当td设置了背景色或者position:relative后导致边框消失,如下图 解决方法: (1)去除背景色 (2)td里再写个div,然后将position:relative设置到div上 (3)用兼容IE8、9、10的hack,hack符:\0,...
  • .table { border-collapse: collapse; }
  • table tr td边框去除

    万次阅读 2013-10-12 15:03:58
    [code="...] ...table tr td{ border-top:#FF0000 solid 1px; width:50%; background-color:#00CC33; text-align:center; line-height:24px;} 1 1 2 2 追加点哈 ...
  • 这个属性,故相邻的两个td共用一个边框,先看一看设置不同值的效果: 解决思路:直接设置行不通,设置2px又显得太宽了,不过看了WPS的表格选中状态时就是会比其它的要宽一倍的,而且行之间切换时td的高度会变化,会...
  • jsp隐藏table里的td边框

    千次阅读 2017-11-07 20:30:50
    设置四条边框透明 style="border: 1px solid transparent !important;" 当然也可以这样设置 border-bottom 底边 border-left 左边 . . .
  • 今日正常发版后,测试同事反映表格的边框线不一样粗细,我在本地没能复现,缩放也没能复现。问了下同事谷歌版本:91,自己的浏览器版本:90。试了下把自己的浏览器更新到91后复现了这种情况。 在网友的启发下的解决...
  • html5表格设置td某一边框不显示

    千次阅读 2021-08-18 16:39:56
    1、实现效果:编号左侧td边框不显示: 2:需要将: 1的下边框设置为0px:border-bottom-width: 0px; 同时将2的上边框设置为0px:border-top-width: 0px; 3、如果只设置一个td边框为0px,达不到最终目的 ...
  • 若想运用在table的边框,可直接在table的css样式中写入, 例如: table{ border-radius:10px 10px 10px 10px ;/*圆形边框*/ } 若是table中的td单元格,可以这样写, 例如 table td{ border-radius:10px 10px...
  • 与background-color属性时td边框消失。 今天发现,在IE浏览器上出现一个现象(edge下也有):table下的td,加了背景色后td的边框消失,如下图 出现这种情况的原因是: td标签同时有position: relative;属性与...
  • 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 只用左边框和上边框,每...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 50,122
精华内容 20,048
关键字:

td边框