テーブルにスクロールバーを追加して最大10個の結果を制限する

Question

テーブルヘッダーの下にスクロールバーを追加しようとしています！このコードはスクロールに有効ですが、テーブルのタイトルとヘッダーを固定しています。私は<tbody>タグの前にスクロール可能なクラスを追加しようとし、tbody {column-count: 10;}をCSSに追加しようとしましたが、うまくいきません。私は確信していませんが、それは1つだけの可能性があります<tr>？どんな助けでも感謝しています。おかげ

 <div class="container"> 
    <div class="row pre-scrollable"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
     <h1>Article List</h1> 
     </div> 
     <table class="table table-fixed table-hover table-striped" align="center"> 
     <thead> 
     <tr> 
      <th class="col-xs-2 col-lg-2 col-md-2 col-sm-2">Publication Date</th> 
      <th class="col-xs-6 col-lg-8 col-md-8 col-sm-8">Article</th> 

      <th colspan="2" class="col-xs-2 col-lg-2 col-md-2 col-sm-2">Action</th> 
     </tr> 
     </thead> 
     <div class="container"> 
      <div class=" row"> 
      <tbody> 
      <?php foreach ($articles as $articleInfo) : ?> 

       <tr> 
       <td class="col-xs-2 col-lg-2 col-md-2 col-sm-2"><?php echo $articleInfo['publicationDate']; ?></td> 
       <td class="col-xs-6 col-lg-8 col-md-8 col-sm-8"><?php echo $articleInfo['title']; ?></td> 

       <td class="col-xs-2 col-lg-1 col-md-1 col-sm-1"> 
        <form action="index.php" method="post"> 
        <input type="hidden" name="article_id" value="<?php echo $articleInfo['recid']; ?>"> 

        <input type="submit" name="Delete" value="Delete"> 
        </form> 
       </td> 
       <td class="col-lg-1 col-xs-2 col-md-1 col-sm-1"> 
        <form action="index.php" method="post"> 
        <input type="hidden" name="article_id" value="<?php echo $articleInfo['recid']; ?>"> 

        <input type="hidden" name="xtitle" value="<?php echo $articleInfo['title']; ?>"> 
        <input type="hidden" name="xsummary" value="<?php echo $articleInfo['summary']; ?>"> 
        <input type="submit" name="Edit" value="Edit"> 
        </form> 
       </td> 
       </tr> 
      <?php endforeach; ?> 
      </tbody> 
      </div> 
     </div> 
    </div> 
    </table> 
    </div> 
</div> 
</div> 

Answer 1

まずdiv要素以下にしてテーブルを追加：

<div id="table-wrapper"> 
    <div id="table-scroll"> 
    <table> 
    ..... // all table content 
    </table> 
    </div> 
</div> 

をこのCSS適用：

#table-wrapper { 
    position:relative; 
} 
#table-scroll { 
    height:150px; 
    overflow:auto; 
    margin-top:20px; 
} 
#table-wrapper table { 
    width:100%; 

} 
#table-wrapper table * { 
    background:yellow; 
    color:black; 
} 

を