HTML表溢出到相邻的Div

Question

我有一张2页长的桌子。我希望第二页上的数据溢出到第一页上的第二个div。看图片。这可能吗？

一个规定是我将其生成为PDF，因此JavaScript不在其中。

它看起来像什么：

我希望它看起来像：

更新：

抱歉，我应该发布这个：我只是认为这是一个简单的修复，不需要代码。我还应该注意到我使用的是visualforce和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>

Answer 1

这可能正是您要找的？请参阅下面的代码段：

在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>