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

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

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

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

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

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

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

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

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

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

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

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

 th {resize:horizontal; overflow:auto;}

Применение resize:horizontal к <th> не помогло с моим FF58. Вместо этого я создал <div> в каждом из них и сделал его изменяемым:

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