Installed the component https://github.com/maxazan/jquery-treegrid

It is based on table. Works.

But if I want to make in one td in several lines with the help of br, then the line moves to the left to the end. How to make the 2nd line even?

enter image description here

  • Give a link to a working example. Or add it with your question. - Gleb Kemarsky
  • temporarily ruined my sitev.ru above Root node - sitev_ru
  • I managed to do something, where is "qqq aaa", how now to raise the arrow up? )) - sitev_ru

1 answer 1

Compiled code based on an example .

The problem is that the down arrows and indents are made in 16 by 16 inline blocks:

.treegrid-indent { width: 16px; height: 16px; display: inline-block; position: relative; }

The second line does not have such a square and it “falls” to the left.

problem with the second line

You can decide by wrapping the contents of the first cells in additional inline boxes. At the same time we align the cells at the upper boundary:

 $(document).ready(function() { $('.tree').treegrid(); }); 
 .tree td, .treegrid-expander, .treegrid-indent { vertical-align: top; } .tree td > div { display: inline-block; margin-right: 12px; } 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="http://maxazan.imtqy.com/jquery-treegrid/css/jquery.treegrid.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="http://maxazan.imtqy.com/jquery-treegrid/js/jquery.treegrid.min.js"></script> <script type="text/javascript" src="http://maxazan.imtqy.com/jquery-treegrid/js/jquery.treegrid.bootstrap3.js"></script> <table class="tree"> <tr class="treegrid-1"> <td><div>Root node<br>Second line</div></td><td>Additional info</td> </tr> <tr class="treegrid-2 treegrid-parent-1"> <td><div>Node 1-1</div></td><td>Additional info<br>Second line</td> </tr> <tr class="treegrid-3 treegrid-parent-1"> <td><div>Node 1-2</div></td><td>Additional info</td> </tr> <tr class="treegrid-4 treegrid-parent-3"> <td><div>Node 1-2-1<br>Second line</div></td><td>Additional info<br>Second line</td> </tr> </table>