table使用display:block时会多出一条边框
在静态页面中添加一个table，然后设置table的显示隐藏，当使用display:block显示table时出现了如下情况，详情请点击链接：
http://jsbin.com/pinovorahu/edit?html,css,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table border="1" class="total">
<thead>
<tr>
<th>姓名</th>
<th>受理故障数</th>
<th>解决问题总数</th>
<th>故障解决率</th>
<th>平均解决历时</th>
<th>积分</th>
</tr>
</thead>
<tbody>
<tr>
<td>顺滔滔</td>
<td>5</td>
<td>5</td>
<td>50%</td>
<td>3小时</td>
<td>10 points</td>
</tr>
<tr>
<td>顺滔滔</td>
<td>5</td>
<td>5</td>
<td>50%</td>
<td>3小时</td>
<td>10 points</td>
</tr>
</tbody>
</table>
</body>
</html>
body,html,table,thead,tbody,tr,td,th{margin:;padding:;}
table{border-collapse: collapse;margin:10px auto 30px;max-width:1000px;}
.total{display:block;}
效果如下图：
在志爷（公众号:闲谈CSS那些事儿）的帮助下重新深入的了解了display:block这个属性。
display:block显示元素的时候，大部分针对的元素是 div 标签或者其他的块级元素
display:inline或者inline-block，一般作用于span等内联元素
display: table作用于table（解决今天遇到问题的方法）
display: table-cell作用于td或者th
table使用display:block时会多出一条边框的更多相关文章
- appearance格式化表单元素的边框，在chrome和FF下鼠标点击时会多出一个蓝色边框
可在元素上添加样式 -webkit-appearance: none; -moz-appearance:none;outline:none; 清除掉元素所有的外貌,以便自定义风格
- clearfix为什么用display:table,而不用display:block
我们都知道clearfix一般这么写: .clearfix:before,.clearfix:after{ content:""; display:table; } .clearf ...
- 有关table布局时tr 属性display:block显示布局错乱
display:block display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的; display:table-row tab ...
- 在table中tr的display:block在firefox下显示布局错乱问题
[转自:] http://blog.csdn.net/sd2131512/article/details/4720345 按照常理,对于某一单元行需要显示时,使用:display:block属性,不需 ...
- display:inline; display:block;
block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...
- display:block、display:inline与displayinline:block的概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- CSS中display:block的使用介绍
在CSS的规定中,每个页面元素都有一个display的属性,用于确定这个元素的类型是行内元素,还是块级元素: (1)行内元素:元素在一行内水平排列,依附于其他块级元素存在,因此,对行内元素设置高度.宽 ...
- ie、firefox、chrome中关于style="display:block" 引发的页面布局错乱的解决办法
ie.firefox.chrome中关于style="display:block" 引发的页面布局错乱的解决办法: table中tr 添加style="display:b ...
- 利用BootStrap Table插件实现自己的弹出框分页。
参考链接1: 官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/home/ 开始使用:http://bootstrap-table. ...
随机推荐
- JS规则 是非颠倒(逻辑非操作符）"!"是逻辑非操作符，也就是"不是"的意思,非真即假，非假即真
是非颠倒(逻辑非操作符) "!"是逻辑非操作符,也就是"不是"的意思,非真即假,非假即真.好比小华今天买了一个杯子,小明说:"杯子是白色的" ...
- FingerPrint Fuzzy Vault Matlab实践
本文实践了指纹识别生物特征识别研究论文A Fuzzy Vault Scheme的算法部分.原文请查看以下链接: Juels, A. & Sudan, M. Des Codes Crypt (2 ...
- 函数的作用域、作用域链以及return关键字
1.作用域 全局作用域:在函数外部使用var关键字定义的变量 局部作用域:在函数内部使用var关键字定义的变量 特点 (1)局部变量无法直接影响全局变量 (2)在局部作用域中可以使用全局作用 ...
- 用在 AMD64 上 aria2_1.33.1-1_amd64.deb 的下载页面
用在 AMD64 上 aria2_1.33.1-1_amd64.deb 的下载页面 如果您正在运行 Ubuntu,请尽量使用像 aptitude 或者 synaptic 一样的软件包管理器,代替人工手 ...
- Android开发 内存泄露检测框架LeakCanary
前言 挖坑后续填坑 中文网站:https://www.liaohuqiu.net/cn/posts/leak-canary-read-me/ gitbub:https://github.com/squ ...
- idea-----Intellij IDEA配置tomcat（非maven项目）
Intellij IDEA配置tomcat(非maven项目) 引用: https://blog.csdn.net/springlovejava/article/details/78570241 ID ...
- 分享一个现代的，免费的，简单而有效的编辑器Vis
Vis是一个免费的开源,类似Vi的代码编辑器,它扩展了vi的模态编辑,内置支持使用相同编辑器的基于结构正则表达式的命令语言实现的多个游标/选择.并将其与基于sam结构正则表达式的命令语言相结合. Vi ...
- Django实现简单的图书管理系统
目录 Django写图书管理系统 功能截图 创建Django项目 开始项目 配置文件 建立路由关系 开始写Django项目 编写核心逻辑函数 写前端页面 add_author.html add_boo ...
- python 版本配置问题
环境变量里有anaconda 但是命令行输入python却并不是anaconda里的python 这个现象的产生是由于anaconda在环境变量里的顺序靠后,python2.7已经在其他环境变量里被找 ...
- SQL中的long text
SQL中的long text 问题: 解决方法: SELECT CONVERT(VARCHAR(5000),参考文献) AS 参考文献 FROM tpi20160503 出现原因: