在静态页面中添加一个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. 【学术篇】状态压缩动态规划——POJ3254/洛谷1879 玉米田Corn Field

    我要开状压dp的坑了..直播从入门到放弃系列.. 那就先拿一道状压dp的水题练练手吧.. 然后就找到了这一道..这道题使我清醒地认识到阻碍我的不是算法,而是视力= = 传送门: poj:http:// ...

  2. Luogu P2822 组合数问题(前缀和)

    P2822 组合数问题 题意 题目描述 组合数\(C_n^m\)表示的是从\(n\)个物品中选出\(m\)个物品的方案数.举个例子,从\((1,2,3)\)三个物品中选择两个物品可以有\((1,2), ...

  3. python全栈开发：字符串格式化

    Python的字符串格式化有两种方式: 百分号方式.format方式百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存. 1.百分号方式 %[(name ...

  4. Java 生成pdf表格文档

    最近在工作做一个泰国的项目,应供应商要求,需要将每天的交易生成pdf格式的报表上传到供应商的服务器,特此记录实现方法.废话不多说,直接上代码: THSarabunNew.ttf该文件是泰国字体自行网上 ...

  5. leetcode-买卖股票最佳时机含冷冻期

    题目描述: 方法一: class Solution: def maxProfit(self, prices: List[int]) -> int: n = len(prices) dp_i_0 ...

  6. day1-字符串、列表

    字符串操作: name = "Wills Qian" # 创建字符串变量 print(len(name)) # 打印字符串长度 print(name[0]) # 提取第一个字符W ...

  7. JS 作用域、原型链

    看到一道好题,并附答案 function Foo() { getName = function () { console.log('1'); }; return this; } Foo.getName ...

  8. c语言学习笔记 - 指针和数组

    结合内存存储数据的机制,c语言里指针的出现和使用也就不奇怪了,如果先学了内存的一些知识,以及程序运行机制,到了c指针这块就会清晰很多. #include <stdio.h> int mai ...

  9. CSS或HTML如何实现文字下面加点？

    就像word里文字加着重号一样,在字的下面加一个点,用CSS怎么做?注意,我说的是下面加点,不是文字加粗或倾斜,请不要回答<strong>或<em>之类的. 把要着重加点的文字 ...

  10. Android之FrameLayout帧布局

    1.简介 这个布局直接在屏幕上开辟出一块空白的区域,当我们往里面添加控件的时候,会默认把他们放到这块区域的左上角; 帧布局的大小由控件中最大的子控件决定,如果控件的大小一样大的话,那么同一时刻就只能看 ...