jquery - 对齐可排序列表中不同表的列

Question

我有一个可排序的列表，每个可排序的元素都包含一个表格。我想对齐所有表格中的列。在 CSS 中使用 table-layout: fixed 效果很好，但是当单元格内容太长时，内容会重叠。我希望表格能够扩展以适应单元格中的内容，如果没有足够的水平空间，应该出现水平滚动条。

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

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

Answer 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.