table中tr的display:block问题

最新推荐文章于 2022-04-14 15:22:38 发布
最新推荐文章于 2022-04-14 15:22:38 发布
阅读量817 收藏 1
点赞数
文章标签： css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42950317/article/details/108086439
版权

table中tr的display:block问题

现象
表格中，一行显示布局错乱

解决方法

  1. 在js设置css的display属性时，设置成空，即document.getElementById(“tr”).style.display="";
    这种改法兼容IE。
  2. document.getElementById(“tr”).style.display=“table-row”;
    这种改法IE不支持，需要用JS来做判断，然后做浏览器的兼容。

应用场景
在一个表格中，一个按钮的按下后，切换某一行tr元素的显示状态。
比如历史版本显示等。

不想做咸鱼的懒惰青年
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
table中tr的display:block显示布局错乱问题
11-21
table中tr的display:block显示布局错乱问题
Table相关整理及Javascript操作table,tr,td
12-13
效果良好的表属性设置： 复制代码代码如下: <table cellSpacing=”0″ cellPadding=”0″ border=’1′ bordercolor=”black” xss=removed></table> ...复制代码代码如下: .text-overflow{ display:block;
在table中tr的display:block在firefox下显示布局错乱问题
sd2131512的专栏
10-23 3527
按照常理，对于某一单元行需要显示时，使用：display:block属性，不需要显示时使用display:none属性，而且这样做在IE浏览器中显示正常，没有任何问题。但是当用Firefox浏览时却出现了布局错乱的问题，然后通FireBug去看了下源码，调试下了，发现是display:block属性搞的鬼。1、当表格为多列的情况下，属性为"display:block"行的内容宽度仅与第一列宽度相同
有关table布局时tr 属性display:block显示布局错乱
weixin_30344131的博客
05-21 613
display:block display:block是可以把非块级元素强制转换为块级元素显示，如内嵌元素span，原来不支持设置宽高，宽度是由内容撑开的; display:table-row table-row:指定对象作为表格行，类同于html标签<tr> 问题如下 当表格为多列的情况下，属性为"display:block"行的内容宽度仅与第一列宽度相同，也就是说无论你使...
在table中tr的display:block显示布局错乱问题
DING135DING的专栏
05-08 795
最近在作项目的时候碰到一个问题，就是需要AJAX来交互显示标签内的东西，按照常理，对于某一单元行需要显示时，使用：display:block属性，不需要显示时使用display:none属性，而且这样做在IE浏览器中显示正常，没有任何问题。 但是当用Firefox浏览时却出现了布局错乱的问题，然后通FireBug去看了下源码，调试下了，发现是display:block属性搞的鬼。 1、
table中tr的display:block显示布局错乱问题解决方法
Lsunrise_的博客
11-21 3845
最近做项目写代码的时候发现,在table中布局想让第一行tr先隐藏然后用js改变其display为block让其显示,但之后发现js改变其display后tr的布局会发生错乱 研究后发现是改变tr的样式的问题. 解决办法如下: 1,不要把隐藏的tr的display改变为block,改成table-row 但发现IE会不支持; 2.把隐藏的tr改为空即display:'',普遍浏览器都支持
微信小程序实现简易table表格
10-17
在`table.wxml`中，我们使用`<view>`标签构建表格结构，`<block wx:for="{{listData}}" wx:key="{[code]}">`循环遍历数据列表，`wx:if`和`wx:else`用来交替改变行的背景色，从而达到类似交替行的效果。 `table.js`...
table内容出现滚动条和表头对齐问题
05-09
在网页设计中，表格（Table）是一种常见的数据展示方式，特别是在处理大量结构化信息时。然而，当表格内容过多导致无法在单个视窗内完全显示时，滚动条就会出现，这时表头对齐问题就显得尤为重要。为了解决"table...
div和table横向和纵向滚动条问题
09-20
将`thead`的`display`设置为`block`，并添加`overflow-y:scroll`，使其在需要时显示垂直滚动条。注意，`border-bottom`属性用于保留`thead`下方的边框，以保持视觉完整性。 ```html <thead style="display:block; ...
表格中tr的display:block在火狐中显示错乱的解决方法
GhostSniper
11-07 258
表格中tr的display:block在火狐中显示错乱的解决方法 按照常理，对于某一单元行需要显示时，使用display:block属性，不需要显示时使用display:none属性，而且这样做在IE浏览器中显示正常，没有任何问题。 但是当用Firefox浏览时却出现了布局错乱的问题，然后通FireBug去看了下源码，调试下了，发现是display:block属性搞的鬼。 1、当表格为多列...
谷歌浏览器中table中tr的display:block显示布局错乱问题
tianlzh的专栏
06-08 2206
最近在作项目的时候碰到一个问题，就是需要AJAX来交互显示 标签内的东西，按照常理，对于某一单元行需要显示时，使用：display:block属性，不需要显示时使用display:none属性，而且这样做 在IE浏览器中显示正常，没有任何问题。 但是当用Firefox浏览时却出现了布局错乱的问题，然后通FireBug去看了下源码，调试下了，发现是display:block属性搞的鬼。
bootstrap table中的行tr标签设置display:block后行样式错乱问题
云中不知人的专栏
11-15 4733
在table中，如果在tr加上display样式时，会发生错乱如下： fa fa Gold Level Virtual Server 已完成 haha Platinum Level Virtual Server 正在执行 aha Hardware Switch 已完成 效果如图： 可以看到，第一行在设置dis
在table中<tr>的display:block显示布局错乱
weixin_34121282的博客
08-28 287
2019独角兽企业重金招聘Python工程师标准>>> ...
javascript 控制 table tr display block 显示模式时，只对第一个单元格有效
grapemlin-某厂螺丝钉
01-04 652
//隐藏所有数据 $.each($("tbody#data_tr tr"), function(){ this.style.display = 'none'; }); //展示数据 var trs = $("tbody#data_tr tr[class='"+a+aa
tr标签设置block布局错乱问题
诚
05-07 668
<table> <tr> <td><label>请选择商品：</label></td> <td> <select id="selectGoods4" class="easyui-combobox" panelHeight="auto" style...
事件委托 tr上 tr的display问题
dashen_me的博客
01-16 281
今天想给tr添加一个事件，事件委托实现，发现怎么也捕获不到tr 查了好多，说tr不是盒子模式，也不是很懂，反正就是不行 解决办法是在tr里面加一个div,去捕获这个div就可以了。 有知道什么原因的小伙伴们可以多多留言谢谢。   如果你要给tr设置display 为block会发现表格会错行，感觉tr好多bug........ 给tr  display 设置为空就可以了。   如果...
tr 加上display 之后 换行
xiaozheyou的专栏
04-14 233
将原display:block 设置为 display:table-row 则错乱问题解决
*{ margin: 0; padding: 0; } html,body{ height: 100%; } body{ width: 100%; background-image:radial-gradient(#22002a,#01001f) } a{ text-decoration: none; } #movie_info{ width: 990px; margin: 0 auto; padding-bottom: 60px; box-sizing: border-box; } #movie_info .info{ width: 100%; padding-bottom: 15px; border-bottom: 1px dotted rgb(255,255,255,0.3); } #movie_info .info img{ float: left; box-shadow: 0 0 6px #C4C4C4; margin-top: 36px; } table{ margin-top: 20px; margin-right: 10px; float: right; color: white; font-size: 13px; } table,tr,td,th{ border: none; } th{ font-size: 22px; text-align: left; height: 38px; line-height: 38px; color: #fdfed2; } td{ width: 240px; line-height: 24px; } table a{ display: block; width: 100px; height: 30px; line-height: 30px; border-radius: 5px; color: #FFFFFF; text-align: center; margin-top: 15px; } table .lookInfo{ background-image:linear-gradient(#9ac534,#427e22) ; } table .buy{ background-image:linear-gradient(#ff8b45,#ff5200) ; } table .score{ color: #f2a32e; } table .score .star{ margin-left: 15px; display: inline-block; width: 103px; height: 20px; background: url(../images/star_big.png) left -80px no-repeat; } table .score em{ font-size: 28px; color: #f2a32e; } #movie_info .info:after,#movie_info ul:after{ content: ""; display: block; clear: both; } /*猜你喜欢*/ #movie_info .like{ position: relative; } #movie_info .like span{ position: absolute; top: 10px; left: 25px; display: block; width: 100px; height: 30px; line-height: 30px; border-radius: 2px; background:rgb(220,216,216, 32%); color: #FFFFFF; text-align: center; font-size: 12px; } #movie_info .like ul{ width: 990px; height: 190px; position: absolute; top: 50px; left: 25px; overflow: hidden; } #movie_info .like ul:after{ content: ""; display: block; clear: both; } #movie_info .like li{ width: 119px; text-align: center; float: left; margin-right: 20px; font-size: 12px; color: #e1ab5b; line-height: 20px; cursor: pointer; } #movie_info .like li img{ width: 119px; height: 168px; }。每行代码加上注释
最新发布
06-01
/* 设置页面样式 */ *{ margin: 0; padding: 0; } html,body{ height: 100%; } body{ width: 100%; background-image: radial-gradient(#22002a,#01001f); /* 设置背景颜色 */ } a{ text-decoration: none; } /* 电影信息区域 */ #movie_info{ width: 990px; margin: 0 auto; padding-bottom: 60px; box-sizing: border-box; } #movie_info .info{ width: 100%; padding-bottom: 15px; border-bottom: 1px dotted rgb(255,255,255,0.3); /* 设置下划线样式 */ } #movie_info .info img{ float: left; box-shadow: 0 0 6px #C4C4C4; /* 设置图片阴影 */ margin-top: 36px; } table{ margin-top: 20px; margin-right: 10px; float: right; color: white; font-size: 13px; } table,tr,td,th{ border: none; } th{ font-size: 22px; text-align: left; height: 38px; line-height: 38px; color: #fdfed2; } td{ width: 240px; line-height: 24px; } table a{ display: block; width: 100px; height: 30px; line-height: 30px; border-radius: 5px; color: #FFFFFF; text-align: center; margin-top: 15px; } table .lookInfo{ background-image:linear-gradient(#9ac534,#427e22); /* 设置按钮渐变背景颜色 */ } table .buy{ background-image:linear-gradient(#ff8b45,#ff5200); } table .score{ color: #f2a32e; } table .score .star{ margin-left: 15px; display: inline-block; width: 103px; height: 20px; background: url(../images/star_big.png) left -80px no-repeat; /* 设置星星图标 */ } table .score em{ font-size: 28px; color: #f2a32e; } #movie_info .info:after,#movie_info ul:after{ content: ""; display: block; clear: both; } /* 猜你喜欢区域 */ #movie_info .like{ position: relative; } #movie_info .like span{ position: absolute; top: 10px; left: 25px; display: block; width: 100px; height: 30px; line-height: 30px; border-radius: 2px; background:rgb(220,216,216, 32%); color: #FFFFFF; text-align: center; font-size: 12px; } #movie_info .like ul{ width: 990px; height: 190px; position: absolute; top: 50px; left: 25px; overflow: hidden; } #movie_info .like ul:after{ content: ""; display: block; clear: both; } #movie_info .like li{ width: 119px; text-align: center; float: left; margin-right: 20px; font-size: 12px; color: #e1ab5b; line-height: 20px; cursor: pointer; } #movie_info .like li img{ width: 119px; height: 168px; }
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值