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/视觉力量:

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