HTML 表溢出到相邻的 Div答案

【问题标题】：HTML Table Overflow Into Adjacent DivHTML 表溢出到相邻的 Div
【发布时间】：2017-05-19 00:10:56
【问题描述】：

我有一张 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>

【问题讨论】：

发布您的 HTML css 代码。
@Rohit 抱歉，我添加了代码。
什么是页面？ HTML 文档没有页面...
@Zak 我正在使用另一种称为 Visualforce 的语言。它与 HTML 非常相似，可以在其中合并 HTML，这就是我在这里发布的原因。我不知道是否可以在 CSS 中做一些简单的事情来导致溢出到辅助 div。

标签： html css html-table overflow

【解决方案1】：

这可能是您正在寻找的？见下面的sn-p：

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

【讨论】：

使用 apex:repeat 您不必重复表格数据，它会为您完成。所以不幸的是，这使单个表中的数据翻了两番。但这是一个很好的例子，说明如何使用纯 HTML 来帮助激发一些思考。谢谢你的建议。
我只是复制它来代表它。您可以插入任何您想要的数据。希望这有帮助:)