`
guoyiqi
  • 浏览: 1010041 次
社区版块
存档分类
最新评论

[微博]页面table 闪动问题解决

 
阅读更多

以下状况是在IE中会出现, firefox 不会


1. 问题描述:

页面使用table来展现的。 分为两列, 左边是一个导航栏, 右边是一个数据的table. 引入的是Smooth Navigational Menu来做导航菜单。

对应的伪代码是:

<table>

<tr>

<td>导航菜单</td>

<td>数据table</td>

</tr>

</table>


问题来了, 但在导航栏菜单切换时, 数据 table会闪动。 俗话说。 不闪的才是最好的, 研究了一下原因

是因为table是自适应大小的。 但某个td的宽度和高度发生改变时, 另一个td也会随之改变, 看上去的效果就是table在闪动。


2. 解决思路

让数据table浮动起来, 设置CSS style="float:center"

问题解决。



分享到:
评论

相关推荐

    用HTML+CSS制作微博的静态页面.zip

    此外,还要使用表格(table)或div布局来组织信息,比如用户的个人资料、微博正文、评论区等模块。考虑到描述中提到的“乱数假文”,这通常是指用Lorem Ipsum这样的占位符文本来模拟实际内容,以便在设计阶段填充...

    jsp页面Table自动换行

    【标题】"jsp页面Table自动换行"涉及的...总结,JSP页面Table自动换行涉及到前端HTML和CSS的布局知识,同时也需要开发者具备Linux操作系统的使用经验和相关开发工具的熟练程度,这样才能有效地解决和优化页面显示问题。

    LayUI table 刷新页面不重置页码

    总的来说,解决"LayUI table 刷新页面不重置页码"的问题,需要我们深入理解LayUI table组件的工作原理,对源码进行适当修改,并通过DEMO来验证和演示修改的效果。这不仅提升了用户体验,也展示了对前端框架的定制...

    bootstrap-table头部错位已完美解决

    在标题和描述中提到的解决方案,已经成功地解决了这一问题,并且经过验证在IE、Firefox和Chrome等主流浏览器上运行良好。 首先,我们需要理解表格错位的常见原因。在Bootstrap框架中,表格是通过CSS浮动布局来实现...

    tableExport导出pdf 中文 乱码解决

    总之,解决`tableExport`导出PDF时的中文乱码问题,需要从页面编码、插件配置、字体支持等多个角度出发,确保整个流程中的编码一致性。通过调整这些设置,你应该能够成功地导出包含中文字符的PDF文件,而不会出现...

    完美解决bootstraptable父子表子表渲染问题

    "完美解决bootstraptable父子表子表渲染问题"的标题表明我们将探讨如何处理子表无法正确渲染或调用初始化方法的常见问题。 首先,让我们理解父子表的基本概念。在BootstrapTable中,父子表通常通过点击父表格的某一...

    js excel表内容导入到页面table中

    3. **编码处理**:在描述中提到,如果遇到导入问题,可能是因为编码不匹配。确保文件读取和解析时采用正确的编码(如UTF-8)。在使用FileReader时,可以设置`TextDecoder`对象来指定编码。 4. **数据转换**:Excel...

    table,切割页面

    在IT行业中,"table,切割页面"这一主题主要涉及到网页设计和前端开发,特别是HTML(超文本标记语言)中的表格元素以及如何优化网页布局。在网页设计中,表格(table)是用于展示数据的一种常见方式,它允许我们将...

    解决layui-table单元格编辑只能text问题

    本篇将详细探讨如何解决layui-table单元格编辑仅支持text问题,以便在实际项目中实现更多元化的表单控件,如自定义表单类型、时间控件、数字框、下拉选择和单选等。 layui-table是layui框架中的表格组件,它提供了...

    bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题

    Bootstrap Table实现X-Editable的行单元格编辑及解决数据Empty和支持多样式问题 本文着重解决X-Editable编辑的数据动态添加和显示数据为Empty的问题,还有给表格单元格的内容设置多样式,使得显示多样化。 一、...

    利用层的table-row、table-cell属性进行页面布局

    "利用层的table-row、table-cell属性进行页面布局"是一种常见的CSS布局技术,尤其在早期的Web开发中广泛使用,尽管现代CSS布局如Flexbox和Grid已变得更为流行。这种布局方法模仿了HTML表格的行(row)和单元格(cell)...

    解决页面表头重复出现的问题,bootstrap-table.js

    2375行加上this.$header.outerHeight() 判断

    vxe-table vue表格解决方案 v2.11.0.zip

    《vxe-table:Vue表格解决方案详解》 在前端开发领域,数据展示是不可或缺的一部分,而表格作为数据展示的重要载体,其灵活性和可扩展性尤为重要。vxe-table是一款基于Vue.js框架的高性能表格组件,它提供了丰富的...

    HTML页面table表格固定行和列

    为了解决这个问题,我们可以实现HTML表格的固定表头和固定左侧列,确保用户在滚动时始终能看到关键信息。 固定表头通常是通过CSS定位技术来实现的。我们可以创建一个包含表头的新`&lt;div&gt;`,并将其设置为绝对定位,使...

    页面 分页 table

    因此,分页成为了解决这个问题的有效手段。 分页技术允许我们将大块数据分割成较小的部分,每部分称为一页,用户可以逐页浏览,而不是一次性看到所有内容。这不仅优化了加载速度,还提高了用户导航的便捷性。分页...

    页面Table导出为Excel的js包

    可将页面的Table元素导出到Excel,设置灵活,通用性强。 参数说明:table的ID名,工作表名,标题,页面设置,单元格设置,副标题,附加信息,行高,首行高,缩放比例 ID名赋值格式: Table表的ID,如果是导出...

    vxe-table vue表格解决方案 v4.5.20.zip

    《vxe-table:Vue.js表格解决方案深度解析》 在当今的Web开发中,表格作为一种重要的数据展示和交互组件,被广泛应用于各种业务场景。vxe-table是基于Vue.js框架的一个强大且灵活的表格解决方案,其版本v4.5.20在...

    Boostrap table 列头和内容不对齐问题,终极解决方案

    6. **使用自定义修复**:如果以上方法都无法解决问题,可以考虑对 `bootstrap-table.js` 进行定制化修改。根据描述,你提供的压缩包中的 `bootstrap-table.js` 可能已经包含了这样的修复。你可以下载并替换原有的...

    vxe-table vue表格解决方案 v3.7.9.zip

    《vxe-table vue表格解决方案 v3.7.9》是一个专为Vue.js开发的高性能、易用的表格组件库,其版本号为3.7.9。作为一个强大的前端UI组件,vxe-table提供了丰富的功能,旨在帮助开发者在构建数据驱动的Web应用时,能够...

    EXCEL导入页面TABLE

    本主题"EXCEL导入页面TABLE"聚焦于如何利用JavaScript(JS)技术将Excel文件的内容读取并转换为网页上的表格(TABLE)进行展示。这个过程涉及到多个知识点,包括文件操作、数据解析以及前端界面的构建。 首先,我们...

Global site tag (gtag.js) - Google Analytics