在静态页面中添加一个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这个属性。

http://mp.weixin.qq.com/s?__biz=MzI1MTA2MDcyOQ==&mid=2649567133&idx=1&sn=122313fefb3573cf13e54196d1ad73f8#rd

 display:block显示元素的时候，大部分针对的元素是 div 标签或者其他的块级元素

display:inline或者inline-block，一般作用于span等内联元素

 display: table作用于table（解决今天遇到问题的方法）

display: table-cell作用于td或者th

table使用display:block时会多出一条边框的更多相关文章

  1. appearance格式化表单元素的边框，在chrome和FF下鼠标点击时会多出一个蓝色边框

    可在元素上添加样式 -webkit-appearance: none; -moz-appearance:none;outline:none; 清除掉元素所有的外貌,以便自定义风格

  2. clearfix为什么用display:table,而不用display:block

    我们都知道clearfix一般这么写: .clearfix:before,.clearfix:after{ content:""; display:table; } .clearf ...

  3. 有关table布局时tr 属性display:block显示布局错乱

    display:block display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的; display:table-row tab ...

  4. 在table中tr的display:block在firefox下显示布局错乱问题

    [转自:] http://blog.csdn.net/sd2131512/article/details/4720345 按照常理,对于某一单元行需要显示时,使用:display:block属性,不需 ...

  5. display:inline; display:block;

    block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...

  6. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  7. CSS中display:block的使用介绍

    在CSS的规定中,每个页面元素都有一个display的属性,用于确定这个元素的类型是行内元素,还是块级元素: (1)行内元素:元素在一行内水平排列,依附于其他块级元素存在,因此,对行内元素设置高度.宽 ...

  8. ie、firefox、chrome中关于style="display:block" 引发的页面布局错乱的解决办法

    ie.firefox.chrome中关于style="display:block" 引发的页面布局错乱的解决办法: table中tr 添加style="display:b ...

  9. 利用BootStrap Table插件实现自己的弹出框分页。

    参考链接1:    官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/home/        开始使用:http://bootstrap-table. ...

随机推荐

  1. 使用 JDK11 遇到的问题

    1.下载的 JDK 解压版中没有 jre 目录以及相应的包,需要通过命令自动生成 进入 JDK 的 bin 目录下,执行以下命令,然后会在 bin 目录下生成一个 jre 目录,需要将该 jre 目录 ...

  2. [模拟退火][UVA10228] A Star not a Tree?

    好的,在h^ovny的安利下做了此题 模拟退火中的大水题,想当年联赛的时候都差点打了退火,正解貌似是三分套三分,我记得上一道三分套三分的题我就是退火水过去的... 貌似B班在讲退火这个大玄学... 这 ...

  3. 「题解」：[POJ2942]Knights of the Round Table

    问题 E: Knights of the Round Table 时间限制: 1 Sec  内存限制: 256 MB 题面 题目描述 作为一名骑士是一个非常有吸引力的职业:寻找圣杯,拯救遇难的少女,与 ...

  4. JS 计算时间范围，最近一周、一个月

    //最近一周 getDay(-7) 返回的是距离当前日期的一周后的时间//一月 getDay(-30)//一年 getDay(-365) function getDay(day){ var today ...

  5. egret 篇——关于ios环境下微信浏览器的音频自动播放问题

    前段时间公司突然想用egret(白鹭引擎)做一个金币游戏,大半个月边看文档边写吭哧吭哧也总算是弄完了.期间遇到一个问题,那就是ios环境下微信浏览器的音频自动播放问题. 个人感觉吧,egret自己封装 ...

  6. IOS学习笔记57--IOS7状态栏适配（二）

    上一遍文章通过XIB的设置达到了状态栏和view重合的问题,这一篇我们讲一讲网传的修改window frame方法. 先上步骤: 第一:在appdeletage里面 添加如下代码:      if ( ...

  7. 根据url提取网站域名的方法小结

    前言:最近使用到了他人总结的一个基础类库.查看了下源码,发现String帮助类的一个辅助方法不是很严谨,重构之. 1.原来程序的写法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...

  8. springcloud 使用RabbitMq

    新建一个项目,三个module 分别为eureka-server,config-server,config-client, eureka-server 的pom.xml, <?xml versi ...

  9. _itoa _itow _itot atoi atof atol

    函数原型: char *_itoa( int value, char *string, int radix ); //ANSI wchar_t * _itow( int value, wchar_t ...

  10. 微信小程序之组件的集合（四）

    这个主要是来开发book的这个大模块的,看看如何优雅的开发出booked模块! 一.book模块的创建 这个就很简单了,创建一个大的框架是很简单的 二.组件的编写 (1)wxml组件页面的编码 首先是 ...