Question

我需要使用条纹表（boostrap）但使用滚动条。在我的代码中，我只是调用类表条带，表格看起来很好。现在我需要添加一个滚动到同一个表保持相同的样式。那可能吗？如何？

以下是我的一些代码

<div class="row col-sm-12">
 <div class="col-sm-7">
  <div class="table-responsive">
   <table class="table table-hover table-striped">
    <thead>
<tr>
    <th>Make</th>
    <th>Model</th>
    <th>Color</th>
    <th>Year</th>
</tr>
</thead>
<tbody>
<tr>
    <td class="filterable-cell">Ford</td>
    <td class="filterable-cell">Escort</td>
    <td class="filterable-cell">Blue</td>
    <td class="filterable-cell">2000</td>
</tr>
<tr>
    <td class="filterable-cell">Ford</td>
    <td class="filterable-cell">Escort</td>
    <td class="filterable-cell">Blue</td>
    <td class="filterable-cell">2000</td>
</tr>
        <tr>
    <td class="filterable-cell">Ford</td>
    <td class="filterable-cell">Escor</td>
    <td class="filterable-cell">Blue</td>
    <td class="filterable-cell">2001</td>
</tr>
</tbody>
</table>
   </div>        
   </div>
  </div>

我不知道在哪里可以找到css代码。我用了一个boostrap模板。

Answer 1

设置高度和溢出y：滚动你的风格

table {
    height: 30px;
    overflow-y: scroll;
}

当数据加载和数据空间不足时，表格将显示滚动。

<table style="border: 1px solid red">
    <thead>
        <tr>
            <td>Header stays put, no scrolling</td>
        </tr>
    </thead>
    <tbody style="display: block; border: 1px solid green; height: 30px; overflow-y: scroll">
        <tr>
            <td>cell 1/1</td>
            <td>cell 1/2</td>
        </tr>
        <tr>
            <td>cell 2/1</td>
            <td>cell 2/2</td>
        </tr>
        <tr>
            <td>cell 3/1</td>
            <td>cell 3/2</td>
        </tr>
    </tbody>
</table>

我可以在html中添加滚动条纹表（boostrap）吗？

1 个答案: