html、css合并表格边框

我们给table和td标签加边框时，默认使用双边框，像这样。

如果我们希望合并table与td的边框，可以在table样式加设置border-collapse的属性值为collapse即可。如下图：

再看效果：

为了便于复制，这里给出代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table{border: 1px solid blue;/*表添加边框*/border-collapse: collapse;/*合并边框*/}td{border: 1px solid blue;/*单元格添加边框*/}</style>
</head>
<body><table><tr><td>1.1</td><td>1.2</td></tr><tr><td>2.1</td><td>2.2</td></tr></table>
</body>
</html>

html、css合并表格边框相关推荐

CSS定义表格边框大全(细线/虚线/点线)
定义表格边框全部为1 边框颜色 #C7C7C7 .tb1{ border:1px solid #C7C7C7;} 定义表格边框左1 下1 左1 右1 (实际同上) 边框颜色 #C7C7C7 .td2 ...
html表格边框美化,CSS美化表格边框汇总与效果
用css美化表格边框1 2 3 4 5 6 7 8 9 ...
html边框定义css设置,表格边框的css语法
表格边框的css语法更新时间:2006年09月21日 00:00:00 作者: 我们知道Dreamweaver在表格制作方面做得非常出色,但是在某些时候还是必须结合css才能达到一些特定效果,下 ...
html表格边框线合并6,CSS表格合并表格边框
---------------------------------------------------------------------------------------------------- ...
合并的表格怎么加横线_word怎么合并表格边框
回答: 方法如下: 去掉Word文字保留表格的方法一: 1.全选表格,按 Delet 键,表格的所有文字被删除,如图3所示: 2.图3是图1所示是表格,文字都没有了. 去掉Word文字保留表格的方法二 ...
php中表格间距代码,css：border-spacing属性（表格边框间距）的示例代码分享
我们知道表格加入边框默认情况下是如下图那样的: 我们在上一节讲解了如何合并表格边框(消除表格边框间距).但是在实际开发中,我们有可能要设置一下表格边框的间距. 在CSS中,我们使用border-spa ...
css隐藏表格线,用CSS改变（隐藏）表格边框样式
用CSS改变表格边框样式,很实用的一种方法. 制作方法: 将下面的代码复制到 ~里,此为隐藏下边框 style="border-collapse: collapse; border-bott ...
html表格边框怎么消除,如何去除table的粗边框
HTML制作新手在用TABLE表格时,会碰到如何改变边线粗线,因为默认的TABLE边线设置即使是1px 是很粗的. 因此会使用其他一些方法来制作出细线边框,这里介绍一种利用CSS来实现细 ...
html表格与CSS控制表格样式
表格是HTML网页中的重要标签,利用表格可以对网页进行排版,使网页信息有条理地显示出来. 这就是一个表格 ,清清楚楚的列出了英雄们的排名. 思维导图 <table>标签用<tabl ...

html、css合并表格边框

html、css合并表格边框相关推荐

最新文章

热门文章