첫 번째 테이블에 더 이상 공간이 없으면 두 번째 테이블에 목록의 내용을 표시하는 방법

DB에서 데이터를 가져 와서 테이블에 나열하려고합니다. 화면 크기가 고정되어 있으며 확장되지 않아야합니다 (스크롤하지 않음). table1에 "공간"이 없으면 다음 항목이 양면 테이블에 나열되기를 원합니다 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

첫 번째 테이블에 더 이상 공간이 없으면 두 번째 테이블에 목록의 내용을 표시하는 방법

답변

관련 문제