如何给table表格的tr行加边框

tr是html标签中行的标记，在web开发中，有时候我们为了美观需要修改行的属性。比如tr的边框。如果我们按照如下的形式修改tr的属性就大错特错了.

tr{

border: 1px solid #f5f6f8;

}

这样是没有任何效果的。因为表格中的tr并非单一的边框，这样便需要属性border-collapse，border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。

实例：为表格设置合并边框模型：

table{
border-collapse:collapse;

}

参数：

separate 默认值。边框会被分开。不会忽略border-spacing 和 empty-cells 属性。

collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

inherit 规定应该从父元素继承border-collapse 属性的值。

如何给table表格的tr行加边框相关推荐

如何给table表格的tr行加border边框（解决篇）
文章目录一.如何给table表格的tr行加border边框二.样式 bug - 截图示下三.解决办法: 四.关于属性 `border-collapse`的取值.解析一.如何给table表格的t ...
element ui table表格实现tr行上下移动，并且改变序号顺序
改变序号的前提是序号后台数据里定义的,未定义的不用管序号调整问题. 上移代码 moveUpHandle(index, row) {if (index > 0) {const param = {} ...
antvue table 表格实现首行搜索
antvue table 表格实现首行搜索首先创建一个组件用来渲染头部输入框 <template><div class="filter"><tr ...
vue table表格中只有表头加竖线分割
table表格中只有表头加竖线分割给<el-table>加一个属性 : :header-cell-style="{'border-right':'1px solid #8888 ...
element-ui table表格增加合计行和表格列固定之后滚动条无法滚动
element-ui table表格增加合计行和表格列固定之后滚动条无法滚动是因为el-table__fixed或el-table__fixed-right有了合计之后把 el-table_ ...
CSS3:nth-child()伪类选择器，Table表格奇偶数行定义样式
转自爱设计原文链接http://www.dangshopex.com/jishufenxiang/WEBkaifajishu/8653.html CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为 ...
element table滚动条占宽度_HTML table表格固定表头 tbody加滚动条
纯CSS table表格 thead固定 tbody滚动效果由于项目需要,在表格中,当数据量越来越多时,就会出现滚动条,而在滚动的过程中,默认情况下表格头部会跟着表格内容一起滚动,导致看不到头部对应 ...
HTML table表格固定表头 tbody加滚动条
纯CSS table表格 thead固定 tbody滚动效果由于项目需要,在表格中,当数据量越来越多时,就会出现滚动条,而在滚动的过程中,默认情况下表格头部会跟着表格内容一起滚动,导致看不到头部对应 ...
antd中如何给Table表格添加合计行
最近项目需求:在表格底部添加一行为金额的合计行,然后分页每页都显示,金额字段是后端返回的数据,前端不进行计算. 因为项目的UI框架使用的是Ant Design 3.x版本,找了一下Table的使用方法 ...

如何给table表格的tr行加边框

如何给table表格的tr行加边框相关推荐

最新文章

热门文章