CODEWITHSUNDEEP
htmlcsshtml-tableoverflow
Olivia
Olivia

Reputation: 2161

HTML Table Overflow Into Adjacent Div

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 it does look like

What I want it to look 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>

Upvotes: 0

Views: 142

Answers (1)

Rohit
Rohit

Reputation: 1812

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>

Upvotes: 3

Related Questions