隣接するDivへのHTMLテーブルのオーバーフロー

Question

私は2ページの長さのテーブルを持っています。私は、2ページ目のデータを1ページ目の2番目のdivにオーバーフローさせたい。写真を参照してください。これは可能ですか？

1つの規定は、私がPDFとして生成しているので、JavaScriptが画像の外にあることです。 私はそれが見えるようにしたいどのよう

：

UPDATE：私はちょうどそれが思った：私はこれを掲載している必要があります

申し訳ありませんが、それがどのように見える

コードを必要としない簡単な修正です。

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：私はまた、私はたVisualforceとCSSを使用していますことに注意しなければならない

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