php - 向表格添加滚动条并限制最多 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;
}