table中tr的display:block显示布局错乱问题解决方法

最新推荐文章于 2021-05-14 16:03:27 发布
最新推荐文章于 2021-05-14 16:03:27 发布
阅读量3.9k 收藏
点赞数 3
CC 4.0 BY-SA版权
分类专栏： table tr 布局 文章标签： 布局 函数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Lsunrise_/article/details/53263944
本文介绍了一种在网页布局中解决TR元素显示错乱的方法。通过避免直接更改TR的display属性来解决兼容性和布局问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最近做项目写代码的时候发现,在table中布局想让第一行tr先隐藏然后用js改变其display为block让其显示,但之后发现js改变其display后tr的布局会发生错乱 研究后发现是改变tr的样式的问题. 解决办法如下:

1,不要把隐藏的tr的display改变为block,改成table-row 但发现IE会不支持;

2.把隐藏的tr改为空即display:'',普遍浏览器都支持



layui-table 数据单元格超出自动换行，同时解决其他列行高不一致问题
weixin_45467631的博客
06-24 1470
问题如下图： 解决： 添加以下代码 <style type="text/css"> /*这里需要加上 .layui-table 如若不加可能会不生效*/ .layui-table .layui-table-cell { height: auto; word-break: normal; display: block; white-space: pre-wrap;
table中tr的display:block显示布局错乱问题
11-21
table中tr的display:block显示布局错乱问题
在table中tr的display:block在firefox下显示布局错乱问题
sd2131512的专栏
10-23 3636
按照常理，对于某一单元行需要显示时，使用：display:block属性，不需要显示时使用display:none属性，而且这样做在IE浏览器中显示正常，没有任何问题。但是当用Firefox浏览时却出现了布局错乱的问题，然后通FireBug去看了下源码，调试下了，发现是display:block属性搞的鬼。1、当表格为多列的情况下，属性为"display:block"行的内容宽度仅与第一列宽度相同
谷歌浏览器中table中tr的display:block显示布局错乱问题
tianlzh的专栏
06-08 2309
最近在作项目的时候碰到一个问题，就是需要AJAX来交互显示 标签内的东西，按照常理，对于某一单元行需要显示时，使用：display:block属性，不需要显示时使用display:none属性，而且这样做 在IE浏览器中显示正常，没有任何问题。 但是当用Firefox浏览时却出现了布局错乱的问题，然后通FireBug去看了下源码，调试下了，发现是display:block属性搞的鬼。
在table中tr的display:block显示布局错乱问题
zj853975468的博客
06-01 3885
最近在作项目的时候碰到一个问题，就是需要AJAX来交互显示 标签内的东西，按照常理，对于某一单元行需要显示时，使用：display:block属性，不需要显示时使用display:none属性，而且这样做 在IE浏览器中显示正常，没有任何问题。 但是当用Firefox浏览时却出现了布局错乱的问题，然后通FireBug去看了下源码，调试下了，发现是display:block属性搞的鬼。 1、当
Bootstrap Table表格布局高手：表头固定与滚动的实现方法
![表格展示利器 Bootstrap ...本文从概述开始，深入探讨了Bootstrap Table的表格布局原理、响应式设计及自定义扩展方法。随后，通过理论与实践相结合的方式，详细分析了表头固定与表格滚动的技术要求和实现技巧，包括C
【跨浏览器布局解决方案】：确保Margin和Padding的浏览器兼容性
!... # 摘要 跨浏览器布局是网页设计与开发中的一大挑战，本文系统地介绍了跨浏览器布局的...随后，深入探讨了兼容性测试的方法与技巧，并提供了识别和解决兼容性问题的策略。文章还介绍了实现兼容性的技术手段，包括CSS重
【界面美化术】：CSS在Bootstrap table多层表头设计中的神奇应用
随着Web前端技术的发展，CSS与Bootstrap在创建响应式网页设计中扮演着关键角色。本文首先介绍了CSS与Bootstrap Table的基础知识，并深入探讨了多层表头设计的理论基础和实现技巧。文章详细阐述了Bootstrap多层表头的...
在table中tr的display:block显示布局错乱问题（2017-8-14 qhjr）
buyax的博客
08-14 830
开发日记
有关table布局时tr 属性display:block显示布局错乱
weixin_30344131的博客
05-21 673
display:block display:block是可以把非块级元素强制转换为块级元素显示，如内嵌元素span，原来不支持设置宽高，宽度是由内容撑开的; display:table-row table-row:指定对象作为表格行，类同于html标签<tr> 问题如下 当表格为多列的情况下，属性为"display:block"行的内容宽度仅与第一列宽度相同，也就是说无论你使...
在table中<tr>的display:block显示布局错乱
weixin_34121282的博客
08-28 363
2019独角兽企业重金招聘Python工程师标准>>> ...
table中tr的display:block问题
weixin_42950317的博客
08-18 886
table中tr的display:block问题 现象 表格中，一行显示布局错乱 解决方法 在js设置css的display属性时，设置成空，即document.getElementById(“tr”).style.display=""; 这种改法兼容IE。 document.getElementById(“tr”).style.display=“table-row”; 这种改法IE不支持，需要用JS来做判断，然后做浏览器的兼容。 应用场景 在一个表格中，一个按钮的按下后，切换某一行tr元素的显示状态。
display tr block时样式乱了
兔老大的胡萝卜
05-14 252
将block换成table-row
表格中tr的display:block在火狐中显示错乱的解决方法
GhostSniper
11-07 315
表格中tr的display:block在火狐中显示错乱的解决方法 按照常理，对于某一单元行需要显示时，使用display:block属性，不需要显示时使用display:none属性，而且这样做在IE浏览器中显示正常，没有任何问题。 但是当用Firefox浏览时却出现了布局错乱的问题，然后通FireBug去看了下源码，调试下了，发现是display:block属性搞的鬼。 1、当表格为多列...
bootstrap table中的行tr标签设置display:block后行样式错乱问题
云中不知人的专栏
11-15 4839
在table中，如果在tr加上display样式时，会发生错乱如下： fa fa Gold Level Virtual Server 已完成 haha Platinum Level Virtual Server 正在执行 aha Hardware Switch 已完成 效果如图： 可以看到，第一行在设置dis
tr的display属性设置为block后，发生错位的解决方法
DMX66的专栏
02-08 8357
如图 原来在ie8上运行，没有问题的，升级到ie10后，就有了这个问题 第二个td 的内容跑到第一个td里面去了，我找到了两种解决方法： 1.设置display=“”，设为空值，(空值应该就是默认值，我上w3school上查了一下，缺省值是inline，可是用inline带进去，还是有这个问题，所以缺省值不是inline，我想的，我也不清楚是什么，待解决) 2.设置display=“t
表格tr的display=block时发生错位的解决
zhq_zvik的博客
11-01 387
设置display=“table-row” 
tr 的显示隐藏display属性导致firefox 的td colspan问题(ZT)
maysnow
04-27 305
不知道你有没有做过这样的一种效果，一个table中的一个连接，javascript 控制 tr 的显示隐藏，来达到显示更多数据的效果。如果没做过，尝试一下吧，你会发现，table中隐藏的tr的含有colspan的td 在再次显示以后，firefox会把内容合并到 第一个td里。 有点绕，把下面的代码copy以后另存为.html 打开 就知道我说的是什么问题了。锻炼自己的动手能力，我就不贴图了...
当前有个网页上的table布局不好看，但是别人写的，没有源代码，我想通过一些技术修改其布局，也不影响网站逻辑，如何处理
最新发布
03-21
- **问题**：表格在小屏设备上显示错乱。 - **解决方案**： - **横向滚动**：通过 CSS 设置 `overflow-x: auto`。 - **折叠行显示**：使用媒体查询将行数据转为块级元素。 - **示例代码**： ```css @...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值