最初のテーブルに空きがなくなると、リストの内容を2番目のテーブルに表示する方法

DBからデータを取り出し、テーブルにリストしたいと考えています。画面のサイズは固定されており、拡張されてはいけません（スクロールなし）。 table1の "スペース"がなくなったら、次の項目を両面テーブル2にリストします。だから私は、画面が拡大され、スクロールされることを望んでいない。最初のテーブルに空きがなくなると、リストの内容を2番目のテーブルに表示する方法

これは私のコードです。

<html> 
<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-6"> 
       <table class="table"> 
        <thead> 
         <tr> 
          <th style="background-color: transparent">TIME</th> 
          <th style="background-color: transparent">LOCATION</th> 
          <th style="background-color: transparent">MESSAGE</th> 
         </tr> 
        </thead> 
       </table> 
      </div> 
      <div class="col-md-6"> 
       <table class="table"> 
        <thead> 
         <tr> 
          <th style="background-color: transparent">TIME</th> 
          <th style="background-color: transparent">LOCATION</th> 
          <th style="background-color: transparent">MESSAGE</th> 
         </tr> 
        </thead> 
       </table> 
      </div> 
     </div> 
    </div> 
</body>

この写真は私が私の実装をする方法を示しています。事前に

感謝を。

出典

2017-12-04 mrk

ソリューションは、JSTLコアが始まる使用することだったと終了属性：

<div class="col-md-6"> 
       <table class="table"> 
        <thead> 
         <tr> 
          <th style="background-color: transparent">TIME</th> 
          <th style="background-color: transparent">LOCATION</th> 
          <th style="background-color: transparent">MESSAGE</th> 
         </tr> 
        </thead> 
        <tbody> 
         <c:forEach items="${somedata}" var="data" begin = "0" end = "5"> 
          <tr> 
           <td>${data.time}</td> 
           <td>${data.message}</td> 
           <td>${data.location}</td> 
          </tr> 
         </c:forEach> 
        </tbody> 
       </table> 
      </div> 
      <div class="col-md-6"> 
       <table class="table"> 
        <thead> 
         <tr> 
          <th style="background-color: transparent">TIME</th> 
          <th style="background-color: transparent">LOCATION</th> 
          <th style="background-color: transparent">MESSAGE</th> 
         </tr> 
        </thead> 
        <tbody> 
         <c:forEach items="${somedata}" var="data" begin = "6" end = "11"> 
          <tr> 
           <td>${data.time}</td> 
           <td>${data.location}</td> 
           <td>${data.message}</td> 
          </tr> 
         </c:forEach> 
        </tbody> 
       </table> 
      </div>

出典

2017-12-04 14:09:52 mrk

私はあなたがこの "列カウント" -techiqueを試してみたいと思いますが：

div { 
    column-count: 4; 
    column-width: 150px; 
    column-rule: 1px solid slategrey; 
}

https://codepen.io/rinatoptimus/pen/qqgBMN

出典

2017-12-04 10:24:07 rinatoptimus

最初のテーブルに空きがなくなると、リストの内容を2番目のテーブルに表示する方法

答えて

関連する問題