优化css:许多包含表的表

Optimize css : many tables that contain tables

本文关键字：许多包 css 优化      更新时间：2023-09-26

我必须使用jquery插件Datatables和twitter bootstrap css渲染多达1500行。在每一行中，都有一个最多可包含50行的表。

使用chrome开发工具探查器和测试，渲染是一个真正的问题。例如，我有250个项目显示219861选择器匹配.tableth，.tabletd.

我如何优化它？

我从引导程序检索twitter引导程序

我是一名框架开发人员，我可以分享我目前面临并记住的一些事情

  1. 在表格布局中写入表格时，不要使用

     'box-sizing:border-box'

    请改用"内容框"，否则它将在行之间创建间隙，而不是在指定或未指定边框的列之间创建间隙。没有任何样式可以帮助您删除。。这在实现嵌套表布局时非常重要

  2. 即使您在表布局中使用DIV，也要注意"最大宽度"在某些mozilla版本中不能正常工作，因此您可能必须维护一个"包装器"DIV，它占据了单元格的100%宽度和100%高度。

  3. 在单元格中保留块杠杆包装，如果是表，则对其应用蒙皮，因为悬停和焦点将无法正确应用。。示例：在一些现代浏览器中也观察到了半填充的悬停皮肤。

  4. 当动态嵌入这些元素而不是动态创建元素并进行附加、准备HTML字符串并进行附加时，它确实表现得很好。。我观察到了这一点。但是修改html渲染器可能看起来很脏，但我们所需要的只是性能

这是我在这个时候记得的一些事情。如果我哪里错了，请纠正我。

建议如果你也针对移动浏览器，那么就选择表布局，除非你在处理div布局方面有很好的专业知识。Floats在某些移动设备中无法正常工作。以及在移动设备中使用媒体查询适当缩放的表格。

我最近遇到了类似的情况，因为waaaay有太多的表数据，不得不用分页来解决。HTML必须提取所有信息并在开始渲染之前构建庞大的表，因此速度非常慢。

最后，我将显示的最大行数限制为200。不允许"展示所有东西"。

我也会尝试优化css。似乎有很多引导css的定义我没有使用。

相关文章：