I am looking for a way to be able to change the height of a row in a table, not to a preset size if possible, by selecting the row border and dragging it.
The scenario is as follows:
I have certain data being represented in the rows of the tables. Depending on the height of the row, the representation of the data may vary i.e. it might be a summary of the data if the row height is small, but may be the detailed description if the height is beyond a certain size. I want to be able to select the row in question and drag it to change its height.
If free flow change is not possible for some reason, I can make do with 3 levels of height. Scenario being, if i drag the row height beyond set limit x, it snaps to the next higher limit x’.
I understand you can change the size of the table elements/rows using css/js to fit predefined conditions, but I was unable to find anything to suit my needs.
In normal case( without use of plugins) , it is not possible to make a row of table re sizable with mouse. So, alternatively you can implement the rows using CSS. You can check the jsfiddle that i have create dfo you here. http://jsfiddle.net/sakirullahi/Npuyc/5/
In this i have used resizable event in jquery.