css单线边框_HTML table表格边框设置为单线的方法

因为平时在html页面中设计表格样式时，一般都是使用 DIV+CSS 的方式来实现，很少使用 table 表格元素，而今天图省事使用 table 表格元素时，发现设置其边框为的样式为双线的形式，所以就正对次问题，百度了一下解决方案。

table 表格的边框宽度不为0的样式

HTML代码html>

Document

table,table tr td {

border:1px solid #ccc;

}

table tr td{

padding: 5px 10px;

}

内容	内容	内容
内容	内容	内容
内容	内容	内容

代码运行结果：

通过下图可得知，table 的表格为双线的形式，但我们可以通过 css 中的 border-collapse 属性，将双线样式的边框合并为单线形式的边框。

css border-collapse属性

border-collapse：属性，为表格设置合并边框模型。

其属性值如下：

separate：默认值。边框会被分开。

collapse：将边框会合并为一个单线的边框

inherit：继承父元素的 border-collapse 属性的值，早期IE浏览器不支持此值。

实现 table 的单线边框的办法

为 table 表格的样式，为入 border-collapse 属性即可

修改以上代码中的，样式如下

table{

border-collapse: collapse;

}

table,table tr td {

border:1px solid #ccc;

}

table tr td{

padding: 5px 10px;

}

运行结果：

css单线边框_HTML table表格边框设置为单线的方法相关推荐

CSS设置原生table表格边框样式（添加表格横线）（附最后表格td画斜线）
table表格边框样式: 推荐这种原理: 只对table td设置左与上边框: 对table设置右与下边框: <style> .table-c table{border-right:1p ...
CSS如何设置html table表格边框样式
CSS如何设置table表格边框样式对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对table和td技巧性设置表格边框 4.对table和td设 ...
HTML表格竖边框线,Table表格横竖线实现Css
.tablel { border-collapse:collapse; /* 关键属性:合并表格内外边框(其实表格边框有2px,外面1px,里面还有1px哦) */ border:solid #999 ...
css table表格相关设置和属性
css table表格相关设置和属性文章目录 css table表格相关设置和属性前言一.表格结构二.使用行内样式控制表格样式 1.属性 2.使用css控制表格的样式前言记录表格的结构,属 ...
html table边框隐藏,HTML table表格边框的控制详细说明
原标题:HTML table表格边框的控制详细说明只显示上边框只显示下边框只显示左.右边框只显示上.下边框只显示左边框只显示右边框不显示任何边框复制代码代码如下: 表格边框的隐藏 b ...
html如何实现表格效果,DIV+CSS技术实现类似table表格的效果
当前位置:网站首页 >> 网站技术 >> DIV+CSS技术实现类似table表格的效果 [发布人:站长之家发布日期:2015-04-03] 表格在网页制作中使用非常广 ...
html语义化表单边框显示,html表格边框怎么去掉
去掉html表格边框的方法:首先创建一个HTML示例文件:然后在body中通过table标签创建表格内容:最后通过"border-left: none;border-right: none; ...
html页面去边框线,HTML表格边框制作教程
表格以分别作起始标识符.其中,之下,还需要由两个成对的标识符号定义表格的行.列,它们分别是--,--,tr标识符定义表中的行,td标识符定义数据表元,即每行中的每一列.--要包含在--里面.此外,论 ...
td 内容自动换行 table表格td设置宽度后自动换行
td 内容自动换行 table表格td设置宽度后自动换行控制样式 table { table-layout:fixed; WORD-BREAK:break-all; } td { word-wrap ...

css单线边框_HTML table表格边框设置为单线的方法

css单线边框_HTML table表格边框设置为单线的方法相关推荐

最新文章

热门文章