Split table into two div

Asked

Viewed 124 times

0

Hello I have four div with fixed size 300px each, and a table in the first div, I need that when this table exceeds the size 300px the rest of the content go 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>

There’s no way I can do this and I’ve mined the Internet.

jquery html css table

  • Paulo, I did a test here and it works for me. You came to realize that the columns of your line does not reach the 300px? Try to put in the first line <th>AAAAAAAAAAAAAAAAAAAAAAAAAAAA</th> <th>BBBBBBBBBBBBBBBBBBBBBBBBBBB</th> <th>CCCCCCCCCCCCCCCCCCCCCCCCCCC</th>, This will reach up to 3 DIV.

  • Okay what I need is that when the table height reaches 300px the rest of the table goes to another div

1 answer

0

I came up with some alternatives of solution to this problem, some are more suitable depending on the general context in which this "division of Tables" lies.

One alternative would be checking in some event, for example, if you will include data in the table through a click on a button, then whenever this button is triggered, after inserting the content into the table, you make the check if the height of the 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 nearest.

Follows a code of how to do this check 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 clon one tr but this can easily be applied to any type of element.

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

Browser other questions tagged jquery html css table

You are not signed in. Login or sign up in order to post.