HTML控制表格边线显示。

前言：

如果我们想让一个表格有黑色的边线，很容易实现。

使用以下代码即可。

table{border-collapse:collapse;}table, td, th{border:1px solid black;}

但是这样的表格我们是无法任意空中边线的显示的。

比如我们想让表格的右上角不显示。

这时，我们就要一点一点画出表格的边线；

用td的边线组成整个表的边线，然后控制td边线的显示。

<style>
.myTable {  border-collapse:collapse; border-spacing:0; width:900px; text-align:center; margin-left:30px; }
.myTable td { border-top:1px solid #000000; border-left:1px solid #000000; border-bottom:1px solid #000000;  border-right:1px solid #000000; padding:3px;}.myTable td.hiddenLeftSide {border-right:1px solid #FFFFFF;}
.myTable td.hiddenTopSide {border-top:1px solid #FFFFFF;}
</style><table class="myTable">
<tr><td>表格边线控制</td><td>border-top:1px solid #000000</td><td class="hiddenLeftSide hiddenTopSide">表格边线控制</td>
</tr>
<tr><td>表格边线控制</td><td>表格边线控制</td><td>表格边线控制</td>
</tr>
<tr><td width="300px">border-left:1px solid #000000; </td><td width="300px">合并border-collapse:collapse;单元格 </td><td width="300px">border-right:1px solid #000000;</td>
</tr>
<tr><td>表格边线控制</td><td>表格边线控制</td><td>表格边线控制</td>
</tr>
<tr><td>表格边线控制</td><td>border-bottom:1px solid #000000; </td><td>表格边线控制</td>
</tr>
</table>

使用以上方法即可实现。

注意：

把右上角的单元格画成白线时，只有按以下这么写才行；

.myTable td.hiddenLeftSide

如果单独写为下面这种形式在td中使用是没有效果的！

hiddenLeftSide

学习总结：

这里面我们了解了表格边线控制的4个属性；

border-top:1px solid #000000; border-top:1px solid #000000;

border-top:1px solid #000000; border-left:1px solid #000000;

border-top:1px solid #000000; border-bottom:1px solid #000000;

border-top:1px solid #000000; border-right:1px solid #000000;

还有【设置表格的边框是否被合并为一个单一的边框】这一属性。

border-collapse:collapse;

HTML控制表格边线显示。相关推荐

html表格最大显示行数6,table表格（支持条件格式、排序、格式化、链接、统计等一堆功能）...
更新记录 1.1.0(2020-10-29) 修复底部边框bug 1.0.9(2020-09-25) 日常维护查看更多一.使用说明如果想完美使用该组件,请一定一字一句看完整个说明文档!!! 如果 ...
c# winform html 表,C# winform中嵌入Excel实现复杂表格的显示和控制
龙源期刊网 http://www.doczj.com/doc/7c6e747d7375a417866f8fac.html C# winform中嵌入Excel实现复杂表格的显示和控制作者:斯琴巴图杨 ...
AppBoxPro - 细粒度通用权限管理框架（可控制表格行内按钮）源码提供下载
2019独角兽企业重金招聘Python工程师标准>>> 特别声明: 提供的源代码已经包含了 AppBoxPro 的全部源代码,用 VS2012 打开项目后,直接 Ctrl+F5 可以 ...
html标题指定位置,css如何控制表格标题的位置？
在HTML中,表格的标题一般会使用标签来定义:通常这个标题会被居中于表格之上,但可以使用CSS属性来设置标题的显示位置.那么css如何控制表格标题的位置?下面给大家介绍一下. 标签定义表格的标题. ...
16.3 表格里显示自定义控件
进度条控制的例子: #python 3.4 import sys from PySide.QtCore import * from PySide.QtGui import *class Example ...
CSS控制表格——制作日历
表格是网页上最常见的元素,除了用它来显示数据,还常被用来排版.这一次我们就来学习如何用CSS控制表格.一.表格中的标记表格(<table>标记)在最初HTML设计时,仅仅是用来存放各种数据 ...
解决百度Ueditor编辑器表格不显示边框问题
一:不显示边框解决方法:在表格处,右键-->表格-->设置表格边线可见二:解决表格边框间距问题 table 表格加上 style 样式
html样式表控制表格,HTMLtable表格边框的控制详细说明表
详解HTML中table表格边框如何控制 html中table表格边框的熟练掌握可以作出很好的效果,本文我们就来详细讲解一下table的边框控制方法. 表格边框的显示与隐藏,是可以用frame参数来控 ...
Flask+MySQL大数据表格分页显示
1.显示效果界面主要由两部分完成顶部搜索栏:按条件传参给后端请求,控制表格数据重载刷新底部表格:接收后端返回JSON数据,对表格渲染显示 2.前端传参前端采用Layui框架渲染,对页码和条数传 ...

HTML控制表格边线显示。

HTML控制表格边线显示。相关推荐

最新文章

热门文章