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

Question

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

Answer 1

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

Answer 2

Flexigrid для jQuery выглядит довольно мило.

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

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

или с опциями:

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

Answer 3

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

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

Answer 4

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

Answer 5

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

 th {resize:horizontal; overflow:auto;}

Answer 6

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

Answer 7

изменить размер: горизонтальный применяется не работает с моим FF58. Вместо этого я создал в каждом из них и сделал это изменяемым размером

.mytable th div{
    resize:horizontal;
    overflow: auto;
}