我正在尝试在表头下面添加滚动条!这段代码适用于滚动,但我试图保持表格标题和标题的固定。我尝试在<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;
}