HTML Table Overflow Into Adjacent Div

Question

I have a table that is 2 pages long. I want the data on the second page to overflow into a second div on the first page. See pictures. Is this possible?

One stipulation is that I am generating it as a PDF so JavaScript is out of the picture.

What it looks like:

What I want it to look like:

UPDATE:

Sorry I should have posted this: I just thought it would have been an easy fix that didn't need code. I should also note that I am using visualforce and css:

CSS:

<style>
body {
    font-size: 8px;
}
th, td {
    text-align: left;
    padding: 1px;
}
thead {
    background-color: #1798c1;
    color: white;
}

#department{
    background-color: #d6d6d6;
    color: black;
}

h2 {
    text-align: center;
    font-size: 11px;
}
p {
    text-align: center;
    font-style: italic;
    font-size: 9px;
}
.float-left {
    float: left;
}
.float-right {
    float: right;
}
</style>

HTML/Visualforce:

<div class="container">
<h2>Company Name</h2>
<p>List</p>
<table>
    <tbody>
    <thead>
    <tr>
        <th>Name</th>
        <th>Title</th>
        <th>Ext.</th>
        <th>Phone</th>
    </tr>
    </thead>
        <apex:repeat value="{!allPeople}" var="depts">
            <th colspan="5" id="department">{!depts}</th>
            <apex:repeat value="{!allPeople[depts]}" var="person">
                <tr>
                    <td>{!person.Name}</td>
                    <td>{!person.Title}</td>
                    <td>{!person.Extension}</td>
                    <td>{!person.Phone}</td>
                </tr>
            </apex:repeat>
        </apex:repeat>
    </tbody>             
 </table>
</div>

@Zak I am using a different language called Visualforce. It is very similar to HTML and can merge HTML in it which is why I posted here. I didn't know if there was something simple that one could do in CSS to cause an overflow into a secondary div. — Olivia
– Olivia, Commented Jan 4, 2017 at 16:26

Rohit · Accepted Answer · 2017-01-04 16:26:12Z

This is might be what you are looking for? see snippet below:

Add below css:

table {
  display:inline-table
}

body {
    font-size: 8px;
}
th, td {
    text-align: left;
    padding: 1px;
}
thead {
    background-color: #1798c1;
    color: white;
}

#department{
    background-color: #d6d6d6;
    color: black;
}

h2 {
    text-align: center;
    font-size: 11px;
}
p {
    text-align: center;
    font-style: italic;
    font-size: 9px;
}
.float-left {
    float: left;
}
.float-right {
    float: right;
}
table {
  display:inline-table;
  }

<div class="container">
<h2>Company Name</h2>
<p>List</p>
<table>
    <tbody>
    <thead>
    <tr>
        <th>Name</th>
        <th>Title</th>
        <th>Ext.</th>
        <th>Phone</th>
    </tr>
    </thead>
        <apex:repeat value="{!allPeople}" var="depts">
            <th colspan="5" id="department">{!depts}</th>
            <apex:repeat value="{!allPeople[depts]}" var="person">
                <tr>
                    <td>{!person.Name}</td>
                    <td>{!person.Title}</td>
                    <td>{!person.Extension}</td>
                    <td>{!person.Phone}</td>
                </tr>
              <tr>
                    <td>{!person.Name}</td>
                    <td>{!person.Title}</td>
                    <td>{!person.Extension}</td>
                    <td>{!person.Phone}</td>
                </tr>
              <tr>
                    <td>{!person.Name}</td>
                    <td>{!person.Title}</td>
                    <td>{!person.Extension}</td>
                    <td>{!person.Phone}</td>
                </tr>
              <tr>
                    <td>{!person.Name}</td>
                    <td>{!person.Title}</td>
                    <td>{!person.Extension}</td>
                    <td>{!person.Phone}</td>
                </tr>
            </apex:repeat>
        </apex:repeat>
    </tbody>             


 </table>
  
  <table>
    <tbody>
    <thead>
    <tr>
        <th>Name</th>
        <th>Title</th>
        <th>Ext.</th>
        <th>Phone</th>
    </tr>
    </thead>
        <apex:repeat value="{!allPeople}" var="depts">
            <th colspan="5" id="department">{!depts}</th>
            <apex:repeat value="{!allPeople[depts]}" var="person">
                <tr>
                    <td>{!person.Name}</td>
                    <td>{!person.Title}</td>
                    <td>{!person.Extension}</td>
                    <td>{!person.Phone}</td>
                </tr>
              <tr>
                    <td>{!person.Name}</td>
                    <td>{!person.Title}</td>
                    <td>{!person.Extension}</td>
                    <td>{!person.Phone}</td>
                </tr>
              <tr>
                    <td>{!person.Name}</td>
                    <td>{!person.Title}</td>
                    <td>{!person.Extension}</td>
                    <td>{!person.Phone}</td>
                </tr>
              <tr>
                    <td>{!person.Name}</td>
                    <td>{!person.Title}</td>
                    <td>{!person.Extension}</td>
                    <td>{!person.Phone}</td>
                </tr>
            </apex:repeat>
        </apex:repeat>
    </tbody>             


 </table>
</div>

with apex:repeat you don't have to repeat the table data, it does it for you. So unfortunately this quadruples the data in a singular table. But this is a good example of how you would do it with plain HTML which helps stimulates some thought. Thank you for your advice.
I just duplicate it to represent it. You can insert any data you want. Hope this helped :)

Collectives™ on Stack Overflow

HTML Table Overflow Into Adjacent Div

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related