Как создать таблицу HTML с настраиваемыми столбцами?

Question

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

Answer 1

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

Answer 2

Виджет Yahoo UI (YUI) data table позволяет изменять размер столбцов. Это общедоступно, но все же в бета-версии, а библиотека YUI довольно громоздка. Любая реализация должна быть в JavaScript/DHTML, поскольку таблицы HTML по умолчанию не обладают такими возможностями.

Answer 3

Вы ищете эффект внешнего вида или есть < -> который показывает, чтобы изменить размер стола?

• Что я для этого сделал, создается div или ячейка, ширина которой составляет всего пару пикселей.
• Я меняю курсор так, чтобы стрелка < ->.
• При щелчке по использованию этого элемента управления div
• При щелчке по использованию этого элемента управления div я создаю на лету еще один «плавающий» div, который показывает, где они в конечном итоге позиционируют его.
• Движение привязано к событию перемещения мыши на JavaScript.
• После освобождения элемента управления я затем изменяю высоту или ширину ячейки таблицы в соответствии с тем, где они перемещали новый элемент управления.

Answer 4

Нет простого ответа, такого как «использовать некоторые свойства foobar html». Это делается с помощью javascript и DOM.
Если вам интересно увидеть реализацию этой функции с Prototype, вы можете взглянуть на TableKit.
Я уверен, что есть реализации jQuery там ... Мне нравится мой старый добрый прототип;)

Answer 5

Flexigrid для jQuery кажется довольно сладким.

Update: Согласно @ комментарию Винсента использование действительно просто ... посмотреть сайт для получения полной информации, однако для наиболее простого примера - включить сценарий затем подключить функции к таблице:

$('#myTableID').flexigrid(); 

или с опции:

$('.classOfTables').flexigrid({height:'auto',striped:false}); 

Answer 6

Добавить эту CSS, чтобы сделать колонки вашей таблицы ширина регулируется ...

th {resize:horizontal; overflow:auto;}