How to make a table so that you can change its size by clicking on the side right edge?

Closed due to the fact that the essence of the question is not clear to the participants of HamSter , Bald , rjhdby , aleksandr barakin , cheops on Oct 6 '16 at 17:53 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • What does "like" mean? Do you describe the stages of development?) - Vasily Barbashev
  • Well, if this question, in your understanding, pulls on a separate development, then yes. And for normal people, a tip is needed where to look in order to implement this action. - Oma
  • You can see how splitters are made, only mouseUp, mouseDown is used there. And you'll use click. - Vasily Barbashev

1 answer 1

  1. Perhaps this article will suggest you: Scaled / Proportional Content with CSS and JavaScript

  2. JQuery UI has a special Resizable plugin.

  3. In the extreme case, you can implement the simplest switching sizes on JS + CSS. Like this: https://jsfiddle.net/66mmzdod/

var $content = $(".content"); var $corner_button = $(".corner"); var MOD = "big"; $corner_button.on("click", function () { toggleBig(); }); function toggleBig () { $content.toggleClass(MOD); } 
 .content { position: relative; width: 300px; height: 300px; background: #ccc; } .content.big { width: 500px; } .corner { position: absolute; top: 0; right: -10px; bottom: 0; width: 10px; background: #000; cursor: pointer; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> <div class="corner"></div> </div>