带有HTML表的jQuery Isotope库

在处理需要简单排序/过滤系统的大量表格数据时，我发现了Isotope库，它似乎完全可以满足我的要求，并提供了许多不错的视觉效果和功能.我希望能够使用同位素对表行进行排序和过滤，并且我提出了一个似乎可行的基本演示.但是，存在一些错误:

While working on a large list of tabular data that needs an easy sorting/filtering system, I discovered the Isotope library, which seems to do exactly what I want, and provides a lot of nice visuals and functionality. I'd like to be able to sort and filter table rows using Isotope, and I've come up with a basic demo that seems to work. However, a few bugs are present:

• 我正在使用< thead>部分用于过滤器和行标题，因此我将同位素选择器应用于< tbody>.但是，当同位素以tbody作为容器初始化时，每行中的表格单元格失去由表格格式分配的宽度.这不是什么大问题，因为我可以根据需要手动设置列宽，但是在当前情况下这很烦人.
• 这些行位于表的外部，在表的容器元素的左上方. tbody元素上的相对位置似乎不像普通div那样影响行的绝对位置样式规则(由Isotope自动应用).通常，如果使用绝对定位或相对定位来定位容器，则绝对定位将相对于其容器元素，但这似乎不是这种情况.

表行已正确过滤，Isotope库正在正确应用动画和样式(带有这些例外).如果可能的话，我想继续使用表格，因为维护此页面的人员将通过CMS进行操作，并且对HTML或CMS用于持续生成任何HTML的WYSIWYG编辑器了解得不够多超出基本表的结构.有人对解决这两个问题有任何建议吗?谢谢！

The table rows are being filtered properly, and the Isotope library is properly applying animations and styling with those exceptions. If at all possible, I'd like to keep the use of tables, as the people maintaining this page will be doing so through a CMS, and don't know enough about HTML or the WYSIWYG editor the CMS uses to consistently produce any HTML structures beyond a fairly basic table. Does anyone have any advice on fixing these two issues? Thanks!

编辑:作为附录，我已经解决了最初遇到的问题.事实证明，tbody元素不接受position:relative或position:absolute属性，因此表行未正确放置.将整个表格设置为位置:相对解决了主要的放置问题，尽管随后将行移动到表格的左上方.我通过用Java中thead元素的高度偏移表行top属性来解决此问题，因为没有Java，显示是正常的.

As an addendum, I've solved the initial problems I was having. Turns out, the tbody element does not accept a position: relative or position: absolute attribute, so the table rows were not being placed properly. Setting the whole table to position: relative solved the main placement issue, though the rows were then moved to the top left of the table. I solved this issue by offsetting the table row top attribute by the height of the thead element in Javascript, since without Javascript the display is normal.

这在Firefox，Chrome，Opera和Safari中可以很好地工作.但是，IE 7、8和9都存在渲染问题-更糟糕的是，它们都是不同的渲染问题. IE9拒绝以正确的偏移量放置表格单元格，IE8根本不显示行，而IE7似乎将整个情况解释为"EXPLODE！".至少我遇到的主要问题已经解决！

This works beautifully in Firefox, Chrome, Opera, and Safari. However, IE 7, 8, and 9 all have rendering issues--and worse, they're all different rendering issues. IE9 refuses to place the table cells with the correct offset, IE8 doesn't show the rows at all, and IE7 seems to interpret the whole situation to mean "EXPLODE!". At least the main problem I encountered was solved!