Question

我正在尝试在表格标题下面添加滚动条！此代码适用于滚动，但我试图保持表标题和标题固定。我尝试在<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>

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;
}

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

1 个答案: