Good day.

There is a table (tag table), the number of records and columns is unknown. I would like to make a functional that will allow the user to independently change the width of any column with automatic changing the width of the remaining ones, in the same way as it is done in MS Excel or other spreadsheets (put the cursor on the column border, pressed the mouse button, dragged, released - the width changed).

Suppose that there is HTML5. Excel is not installed.

  • 2
    jquery plugin colResizable - slippyk
  • And if the table is generated in DOM, for example, the same jQuery, will it work? - user211576 pm

1 answer 1

<!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>
Approximately so, if on 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

  • There is one peculiarity: a specific cell is being moved apart and not a row or column. - sercxjo
  • one
    in the end, he took this option as a basis, colResizable somehow behaved strangely (my table is much more complicated than in the example). Although yes, you can get a strange effect when only one cell is moved apart, and not the entire column. Another question - how to prevent the width from changing vertically? - user211576
  • and still, if on the table in 240 lines to start this function for "td", everything begins to brake noticeably. - user211576