display:block

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

display:table-row

table-row:指定对象作为表格行,类同于html标签<tr>

问题如下

当表格为多列的情况下,属性为"display:block"行的内容宽度仅与第一列宽度相同,也就是说无论你使colspan的属性值为多少,剩余列的空间都不进行解析

新闻的内容只能占一列的宽度

当将display:table-row,问题解决

display 属性值如下

none    此元素不会被显示。   
block    此元素将显示为块级元素,此元素前后会带有换行符。   
inline    默认。此元素会被显示为内联元素,元素前后没有换行符。   
inline-block    行内块元素。(CSS2.1 新增的值)   
list-item    此元素会作为列表显示。   
run-in    此元素会根据上下文作为块级元素或内联元素显示。   
compact    CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。   
marker    CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。   
table    此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。   
inline-table 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group    此元素会作为一个或多个行的分组来显示(类似 <tbody>)。   
table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group    此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。   
table-row    此元素会作为一个表格行显示(类似 <tr>)。   
table-column-group    此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。   
table-column    此元素会作为一个单元格列显示(类似 <col>)   
table-cell    此元素会作为一个表格单元格显示(类似 <td> 和 <th>)   
table-caption    此元素会作为一个表格标题显示(类似 <caption>)   
inherit    规定应该从父元素继承 display 属性的值。

有关table布局时tr 属性display:block显示布局错乱的更多相关文章

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

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

  2. CSS属性Display(显示)和Visibility(可见性)

    隐藏一个元素可以通过把display属性设置为“none”,或把visibility属性设置为“hidden”.但是请注意,这两种方法会产生不同的效果. Visibility:hidden可以隐藏某个 ...

  3. 区别CSS中display:box;inline;none以及HTML中 <frame> 标签<table> 标签的 frame 属性

    区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内 ...

  4. table使用display:block时会多出一条边框

    在静态页面中添加一个table,然后设置table的显示隐藏,当使用display:block显示table时出现了如下情况,详情请点击链接: http://jsbin.com/pinovorahu/ ...

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

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

  6. 用radio控制<tr>的隐藏和显示问题

    jsp页面代码 <tr> <th nowrap="nowrap" width="10%" height="50px" st ...

  7. iOS:UICollectionView流式布局及其在该布局上的扩展的线式布局

    UICollectionViewFlowLayout是苹果公司做好的一种单元格布局方式,它约束item的排列规则是:从左到右依次排列,如果右边不够放下,就换一行重复上面的方式排放,,,,,   常用的 ...

  8. table中tr的display属性在火狐中显示不正常,IE中显示正常

    最近在作项目的时候碰到一个问题,就是需要AJAX来交互显示<tr> </tr> 标签内的东西,按照常理,对于某一单元行需要显示时,使用:display:block属性,不需要显 ...

  9. tr设置display属性时,在FF中td合并在第一个td中显示的问题

      今天用firefox测试页面的时候,发现用javascript控制 tr 的显示隐藏时,当把tr的显示由“display:none”改为“display:block”时,该tr下的td内容合并到了 ...

随机推荐

  1. ubuntu 上安装支付宝安全插件不能运行问题

    1.在ubuntu的firefox浏览器中打开支付宝首页,不能登录,按照提示下载插件 aliedit.tar.gz 2.解压到某个文件夹下,有文件aliedit.sh, 运行 # sh aliedit ...

  2. N1 Armbian 安装 OpenMediaVault

    前言 接上一篇继续折腾,这次在 N1 上进行一些本地化设置并安装使用 OpenMediaVault 步骤 使用 ssh 连接到 N1,修改系统源 cd /etc/apt cp sources.list ...

  3. Android 查看联系人电话和姓名(ContentProvider)

    1.介绍 2.使用方法 3.在AndroidManifest.xml文件中添加相关设置 <uses-permission android:name="android.permissio ...

  4. yyy的python3第七天学习

    望着小月亮:https://www.cnblogs.com/triple-y/ 请尊重原创:https://www.cnblogs.com/triple-y/p/9655753.html 第七天学习的 ...

  5. 【算法笔记】B1005 继续(3n+1)猜想+sort()用法

    1005 继续(3n+1)猜想 (25 分) 卡拉兹(Callatz)猜想已经在1001中给出了描述.在这个题目里,情况稍微有些复杂. 当我们验证卡拉兹猜想的时候,为了避免重复计算,可以记录下递推过程 ...

  6. leetcode 283 Move Zeros; 27 Remove Elements; 26 Remove Duplicated from Sorted Array;

    ,,,,}; //把数组的值赋给vector vector<int> vec(arr, arr+sizeof(arr)/sizeof(int)); 解法一: 时间复杂度O(n) 空间复杂度 ...

  7. vue控制父子组件渲染顺序

    在父组件中,如下图渲染子组件,那如何在父组件中加入一些数据获取逻辑且能控制子组件渲染呢. 就是像在上图中红框圈起来的那样,挂个 ok(其他你自己定义的也可以) 参数,同时在父组件的任何生命周期中去改变 ...

  8. vue指令与事件修饰符

    一.条件渲染指令 vue中提供了两个指令可以用于判断是否要显示元素,分别是v-if和v-show. 实例: <!DOCTYPE html> <html lang="en&q ...

  9. CSS 单行 多行文本溢出显示省略号

    单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...

  10. Google Authenticator(谷歌身份验证器)

    <!DOCTYPE html>Google Authenticator(谷歌身份验证器) ] Google Authenticator(谷歌身份验证器) Google Authentica ...