在可排序列表中对齐不同表的列答案

【问题标题】：Align columns of different tables in a sortable list在可排序列表中对齐不同表的列
【发布时间】：2011-04-19 16:58:44
【问题描述】：

我有一个可排序的列表，每个可排序的项目都包含一个表格。我想对齐所有表格中的列。在 CSS 中使用 table-layout:fixed 可以正常工作，但是当单元格内容太长时，内容会重叠。我希望表格可以展开以适应单元格中的内容，如果水平空间不足，应该会出现水平滚动条。

我试图解决这个问题，将所有内容放在一个表中，但这并不好，因为在某些情况下，排序项中的表下会出现额外的内容，而且使用 jquery 对表行进行排序也不是很好。

代码的简化版在这里：http://jsfiddle.net/buZUz/1/

【问题讨论】：

标签： jquery html css tablelayout

【解决方案1】：

我认为您在此处尝试使用多个表实现的目标将很难在不同的浏览器中实现和工作。过去我在使用 table-layout:fixed 时遇到过很多“问题”，现在从不使用它。

我很想回到一个表并让每一行都可排序。

要获取每行数据下的额外内容，您可以：

-add another row with a colspan that covers all of the rows and put you extra content in that.

-add hover event that shows the extra row or the data in a popup if it doesn't have to always be displayed.

-add the extra detail in a seperate table , "a detail table" that gets populated depending on which row is selected.

【讨论】：

一个表格很难在排序项中留出空间（边框间距是最好的，但在 IE7 中不起作用，另一个想法是将单元格内容包装到 div 中并将 css 添加到div，如果所有单元格内容的高度相等/固定，这将很好用）。额外行的问题是，在排序时它应该与其“父级”一起使用。也许可以通过可排序事件中的一些解决方法来解决。无论如何，谢谢你的想法，如果没有更好的办法，我会考虑回到一张桌子。