Как сделать столбцы таблицы html изменчивыми?

Question

У меня довольно стандартная бутстрап-стиль <table>. Я хочу сделать столбцы этой таблицы изменяемыми по размеру, например. по щелчку и перетаскивание правой границы <th> элемент. Я не могу использовать какие-либо jQuery-плагины, поскольку я использую Angular, и зависимость jQuery неприемлема.

Я думал, что если бы я мог поймать событие click/mousemove на правой границе элемента <th>, я мог бы реализовать свою собственную логику изменения размера (следить за горизонтальным движением мыши и соответственно регулировать ширину), но я не знаю, как это может быть сделано (не существует такого элемента, как событие, связанное с элементом, насколько я знаю).

Каков наилучший способ сделать столбцы изменяемыми по размеру пользователем? Без jQuery (и предпочтительно - в угловом 2 контексте).

Answer 1

Возможно, вы, вероятно, слишком усложняете ситуацию, если хотите реализовать это самостоятельно.

ag-grd отличная библиотека сетки для угловых 2, который обрабатывает все ожидаемые действия таблицы (изменить размер, изменить порядок и т.д ...)

Вы можете использовать равнину Версии JavaScript или AG-сетки Угловых 2 Компонент из ag-grid-ng2

«АG-Грида является Enterprise Grade Javascript Data Grid. цель AG-Грид является создание сетки данных, корпоративное программное обеспечение можно использовать для создания приложений, таких как отчетность и данных аналитики, бизнес рабочий процесс и ввод данных "

Answer 2

resize свойство не работает с таблицей, то почему вы должны поместить DIV внутри таблицы й и тд, а затем изменить его размер, попробуйте ниже фрагмент кода

table { 
 
    border-collapse: collapse; 
 
    border-spacing: 0px; 
 
} 
 
td { 
 
    border: 2px solid black; 
 
    padding: 0; 
 
    margin: 0px; 
 
    overflow: auto; 
 
} 
 

 
div { 
 
    resize: both; 
 
    overflow: auto; 
 
    width: 120px; 
 
    height: 120px; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    border: 1px solid black; 
 
    display:block; 
 

 
} 
 

 
td div { 
 
    border: 0; 
 
    width: auto; 
 
    height: auto; 
 
    min-height: 20px; 
 
    min-width: 20px; 
 
}

<table> 
 
    <tr> 
 
    <td><div>one</div></td> 
 
    <td><div>two</div></td> 
 
    <td><div>three</div></td> 
 
    </tr> 
 
    <tr> 
 
    <td><div>four</div></td> 
 
    <td><div>five</div></td> 
 
    <td><div>six</div></td>   
 
    </tr> 
 
    <tr> 
 
    <td><div>seven</div></td> 
 
    <td><div>eight</div></td> 
 
    <td><div>nine</div></td>  
 
    </tr> 
 
</table>

Answer 3

Не. Вместо этого используйте bootstrap. Пусть bootstrap решит изменить размер для конечных пользователей.
- Изменение размеров колонок не будет хорошо работать на устройствах. - Возможно, вам придется запомнить ширину столбца на сервере или в браузере, что может закончиться как большая работа. Это закончится? Должны ли переупорядочиваться столбцы? Должны ли они быть удаляемыми? Лучше сделать какой-то дизайн, а не лопать все обратно у конечного пользователя.