优化 css ：包含表的许多表答案

【问题标题】：Optimize css : many tables that contain tables优化 css ：包含表的许多表
【发布时间】：2013-01-30 12:58:40
【问题描述】：

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

使用 chrome 开发工具分析器和测试，渲染是一个真正的问题。例如，我有 250 个项目显示 219861 选择器匹配 .table th、.table td。

我该如何优化这个？

我从 bootstrapcdn 检索 twitter 引导程序

【问题讨论】：

【解决方案1】：

我是一名框架开发人员，我可以分享一些我在这一刻遇到并记住的事情

在表格布局中写表格时，不要使用
```
 'box-sizing:border-box'
```
改为使用“内容框”，否则如果您指定或未指定边框，它将在行之间而不是列之间产生间隙。没有样式可以帮助您删除它。这在实现嵌套表格布局时非常重要
在单元格内维护块杆包装，如果它是表格，则对其应用皮肤，因为悬停和焦点将无法正确应用。示例：在一些现代浏览器中也观察到半填充悬停皮肤。
虽然动态嵌入这些元素而不是动态创建元素并附加，准备 HTML 字符串并附加它，但它确实表现得非常好。我观察到了这一点。但是修改 html 渲染器可能看起来很脏，但我们需要的只是性能

这些是我现在记得的一些事情。如果我在某个地方错了，请纠正我..

建议如果您也针对移动浏览器，那么除非您在处理 div 布局方面具有良好的专业知识，否则请选择表格布局。 Floats 在某些移动设备中无法正常工作。并且表格也可以通过移动设备中的媒体查询正确缩放。

【讨论】：

你熟悉datatables.net 吗？我不确定您的任何建议是否适用于该插件。
@Blazemonger 嗯，我会说不完全正确。我已经看到标题并刚刚回答了这个问题。可能这个答案不合适。但根据问题标题，我觉得它会在某个地方匹配.. 如果不匹配，请投票删除答案。我不介意:-)

【解决方案2】：

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

【讨论】：

【解决方案3】：

最后我将显示的最大行数限制为 200。不允许“显示所有内容”。

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

【讨论】：