ブートストラップテーブルの境界線を避ける方法

私はtbodyの枠線を避けたいと思います。は現在、私のコードは次のとおりです。ブートストラップテーブルの境界線を避ける方法

<body> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <table class="table"> 
       <thead> 
        <tr> 
         <th>TIME</th> 
         <th>LOCATION</th> 
         <th>MESSAGE</th> 
        </tr> 
       </thead> 
       <tbody> 
        <c:forEach items="${dbitems}" var="item" begin = "0" end = "5"> 
         <tr> 
          <td>${item.time}</td> 
          <td>${item.location}</td> 
          <td>${item.message}</td> 
         </tr> 
        </c:forEach> 
       </tbody> 
      </table> 
     </div> 
     <div class="col-md-6"> 
      <table class="table"> 
       <thead> 
        <tr> 
         <th>TIME</th> 
         <th>LOCATION</th> 
         <th>MESSAGE</th> 
        </tr> 
       </thead> 
       <tbody> 
        <c:forEach items="${dbitems}" var="item" begin = "6" end = "11"> 
         <tr> 
          <td>${item.time}</td> 
          <td>${item.location}</td> 
          <td>${item.message}</td> 
         </tr> 
        </c:forEach> 
       </tbody> 
      </table> 
     </div> 
    </div> 
</div>

私の出力は、現在、次のようになります。

いくつかの研究の後、私はtableclass table-borderlessを使用するので、私はそれを試してみました解決策になるかもしれないことが分かりました。しかし、私は私の期待に合わない出力で何を得る：私は最初の画像のようにその行の境界線なしで同じことを達成したい私はtable-borderless

に、両方のテーブルクラスを置く

を。

ありがとうございます。

出典

2017-12-07 mrk

は、このCSSを使用し、それが<head>タグで

.table.table-bl thead>tr>th, .table.table-bl tbody>tr>th, .table.table-bl tfoot>tr>th, .table.table-bl thead>tr>td, .table.table-bl tbody>tr>td, .table.table-bl tfoot>tr>td { 
 
    border-top: none; 
 
} 
 
.table.table-bl thead>tr>th { 
 
    border-bottom: none; 
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-6"> 
 
      <table class="table table-bl"> 
 
       <thead> 
 
        <tr> 
 
         <th>TIME</th> 
 
         <th>LOCATION</th> 
 
         <th>MESSAGE</th> 
 
        </tr> 
 
       </thead> 
 
       <tbody> 
 
        <c:forEach items="${dbitems}" var="item" begin = "0" end = "5"> 
 
         <tr> 
 
          <td>${item.time}</td> 
 
          <td>${item.location}</td> 
 
          <td>${item.message}</td> 
 
         </tr> 
 
         <tr> 
 
          <td>${item.time}</td> 
 
          <td>${item.location}</td> 
 
          <td>${item.message}</td> 
 
         </tr> 
 
         <tr> 
 
          <td>${item.time}</td> 
 
          <td>${item.location}</td> 
 
          <td>${item.message}</td> 
 
         </tr> 
 
        </c:forEach> 
 
       </tbody> 
 
      </table> 
 
     </div> 
 
     <div class="col-md-6"> 
 
      <table class="table table-bl"> 
 
       <thead> 
 
        <tr> 
 
         <th>TIME</th> 
 
         <th>LOCATION</th> 
 
         <th>MESSAGE</th> 
 
        </tr> 
 
       </thead> 
 
       <tbody> 
 
        <c:forEach items="${dbitems}" var="item" begin = "6" end = "11"> 
 
         <tr> 
 
          <td>${item.time}</td> 
 
          <td>${item.location}</td> 
 
          <td>${item.message}</td> 
 
         </tr> 
 
        </c:forEach> 
 
       </tbody> 
 
      </table> 
 
     </div> 
 
    </div> 
 
</div>

出典

2017-12-07 07:48:42 Gattbha

あなたの問題を解決します

<style> 
    body, div, table, tr, th { 
    border-style: none !important;} 
</style>

このCSSを試してみてください

出典

2017-12-07 07:50:15

ブートストラップテーブルの境界線を避ける方法

答えて

関連する問題