3

Добрый день.

Имеется таблица (тэг table), количество записей и столбцов неизвестны. Хотелось бы сделать функционал, который разрешит пользователю самостоятельно менять ширину любого столбца с автоматическим изменением ширины оставшихся, аналогично как это делается в MS Excel или других электронных таблицах (навёл курсор на границу столбца, нажал кнопку мыши, потащил, отпустил - ширина изменилась).

Предположим, что имеется HTML5. Excel не установлен.

2
  • 2
    jquery-плагин colResizable
    – slippyk
    7 июл 2016 в 7:04
  • А если таблица сгенерирована в DOM, например, тем же jQuery, будет работать?
    – user211576
    7 июл 2016 в 16:25

1 ответ 1

4

<!DOCTYPE html>
<html>
<head>
    <title>Table</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/smoothness/jquery-ui.css">
    <style type="text/css">
	td
	{	
		width:100px;
		height:50px;
	}
    </style>
    <script type="text/javascript">
$(function() {
	
    $('td').resizable({
        alsoResize: "#astor img",
		minWidth:100,
		minHeight: 50
    });
	
});
    </script>
</head>
<body>
	<table border="1" >
	<tr><td>Текст</td><td>Текст</td></tr>
	<tr><td>Текст</td><td>Текст</td></tr>
	</table>
</body>
</html>
Приблизительно так, если на Jquery ui http://jquery.page2page.ru/index.php5/%D0%A0%D0%B0%D1%81%D1%82%D1%8F%D0%B3%D0%B8%D0%B2%D0%B0%D0%B5%D0%BC%D1%8B%D0%B5_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%8B

3
  • Есть одна особенность: раздвигается конкретная ячейка а не строка или колонка.
    – sercxjo
    7 июл 2016 в 20:36
  • 1
    в итоге взял за основу этот вариант, colResizable как-то странно вёл себя (у меня таблица гораздо более сложная, чем в примере). Хотя да, можно получить странный эффект, когда раздвигается только одна ячейка, а не колонка целиком. Ещё вопрос - как запретить изменение ширины по вертикали?
    – user211576
    8 июл 2016 в 11:18
  • и ещё, если на таблице в 240 строк запустить эту функцию для "td", всё начинает заметно тормозить.
    – user211576
    8 июл 2016 в 11:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.