Divide table into two div

Question

Divide table into two div

Navigation

#1 by (0 votes)

0

Hello, I have four div with fixed size 300px each, and a table dento of the first div, I need that when that table exceeds 300px the rest of the content goes to the second div and so on.

#pg1{
  border: 1px solid black;
  height: 600px;
  width: 350px;
  float: left;
  top: 0px;
  position: relative;
}
#pg2{
  border: 1px solid black;
  height: 600px;
  width: 350px;
  float: right;
  top: 0px;
  position: relative;
}
#tbl{
  border: 1px solid black;
}

<div id="pg1">
  <table id="tbl">
    <thead>
      <th>01</th>
      <th>02</th>
      <th>03</th>
    </thead>
    <tbody>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
      <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
      </tr>
    </tbody>
  </table>
</div>
<div id="pg2">

</div>
<div id="pg3">

</div>
<div id="pg4">

</div>

I'm not able to do this and I've already scoured the internet.

html jquery css table

asked by anonymous 16.05.2017 / 16:42

1 answer

Help with api Error Parse error: syntax error, unexpected How to implement in VB .ASPX the action of the ENTER key as TAB?

score 0 · Answer 1

I have found some solutions to this problem, some are more appropriate depending on the general context in which this "division of tables" is.

An alternative would check on some event, for example, if you are going to include data in table with a click of a button, then whenever that button is triggered, after inserting the content in table , you check if the height of table exceeds the limit set at 300px, if it exceeds, you can take the added element, clone it, remove it from the table that exceeded the height, and add in div .

Here is a code for how to do this in practice:

var table = $("#tbl");
  if(table.height() > 300){
     var ultimaLinha = $('#tbl tr:last');
     var clone = ultimaLinha.clone();
     ultimaLinha.remove();
     var tableProxima = table.parent().next("div");
     tableProxima.append(clone);
  }

Note that in the example, I clone a tr but this can easily be applied to any type of element.

The second alternative would be more appropriate for the case of a table filled, like the example that you presented in the question, in view of this content pattern <tr><th>AA</th><th>BB</th><th>CC</th></tr> , 15 lines to exceed the height limit (300px), so I imagine something like, divide the number of lines present in table ( $('#tbl tr').length; ) by 2 and check if the result is less than 15, if it is, leave the number result as the number of rows in the table and the rest put in the other div , to make it use the same logic as the code presented above, if I have not been clear, feel free to ask.