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

来源:互联网 发布:李玟 知乎 编辑:程序博客网 时间:2024/05/17 21:54

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 属性的值。

阅读全文
0 0
原创粉丝点击
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防,我是瞎子 苦胆水吐出来了怎么办 喝多了吐胆汁怎么办 吐出黄水苦水是怎么办 喝酒喝的一直吐怎么办 孕期总胆汁酸高怎么办 孕早期胆汁酸高怎么办 孕妇总胆汁酸高怎么办 宝宝一天吐了6次怎么办 肛周脓肿破了怎么办 肛周脓肿发烧了怎么办 肛周脓肿便血该怎么办 婴儿得肛周脓肿怎么办 水痘长在龟头上怎么办 轻度萎缩性胃炎伴肠化怎么办 肺癌晚期腿肿了怎么办 胸骨剑突按压痛怎么办 22岁有白头发怎么办 血热导致掉头发怎么办 36岁脱发严重该怎么办 血热引起的脱发怎么办 头发掉的好厉害怎么办 胃热导致的口臭怎么办 肝火和胃火旺盛怎么办 2月宝宝舌苔厚白怎么办 小孩舌头咬破了怎么办 两岁宝宝不说话怎么办 4岁半说话不清楚怎么办 10小孩说话不清怎么办 2岁宝宝说话结巴怎么办 4岁宝宝说话结巴怎么办 3岁幼儿说话结巴怎么办 三岁宝宝说话结巴怎么办 6岁宝宝说话结巴怎么办 经前下巴长痘怎么办 胃火导致的口臭怎么办 脸上有热毒痘痘怎么办 被丙肝患者针扎怎么办 大脑供血不足该怎么办 钛钉长在肉里了怎么办 鼻背筋膜松了怎么办 脑子里长了囊肿怎么办