Совместите столбцы разных таблиц в сортируемом списке

Question

У меня есть сортируемый список, каждый сортируемый элемент содержит таблицу. Я хотел бы выровнять столбцы из всех таблиц. Использование макета таблицы: исправлено в CSS, работает нормально, но когда содержимое ячейки слишком длинное, содержимое перекрывается. Мне бы хотелось, чтобы таблицы расширялись до содержимого в ячейках, а горизонтальная полоса прокрутки должна отображаться, если недостаточно горизонтального пространства.

Я попытался решить эту проблему, поместив все в одну таблицу, но это не очень хорошо, потому что в некоторых случаях дополнительное содержимое появляется под таблицей в элементе сортировки, а также сортировка строк таблицы с помощью jquery работает не так хорошо.

Упрощенная версия кода находится здесь: http://jsfiddle.net/buZUz/1/

Answer 1

Я думаю, что то, что вы пытаетесь достичь с помощью нескольких таблиц, будет очень трудным для выполнения и позволит работать в разных браузерах. В прошлом у меня было много «проблем» с макетом таблицы: исправлено, и теперь я никогда им не пользуюсь.

Я хотел бы вернуться к одной таблице и сделать каждую строку сортируемой.

Чтобы получить дополнительный контент под данными в каждой строке, вы можете:

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