将滚动条添加到表格中,最多限制10个结果


Add scrollbar to table and limit upto 10 result

我正在尝试在表头下面添加滚动条!这段代码适用于滚动,但我试图保持表格标题和标题的固定。我尝试在<tbody>标记之前添加预滚动类,并在css中添加tbody {column-count: 10;},但不起作用。我不确定,但可能是因为只有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>

首先在下面的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;
}