【问题标题】:How To add Horizontal Scroll bar at the top of the table?如何在表格顶部添加水平滚动条?
【发布时间】:2021-09-09 18:26:36
【问题描述】:
<div class="table-responsive">
                
                  <table class="table table-striped">
                     
                    <thead>
                      <tr>
                        <th>Agent Name</th>
                        <th>Total number calls audited</th>
                        <th>Fatal Count</th>
                        <th>Score</th>  
                        <th>Average</th>      
                      </tr>
                    </thead>
                    <!-- <div style="overflow:scroll;min-height:.01%;overflow-y:hidden;overflow-x:scroll;"> -->
                  <tbody>
                 
                   
                        <?php 
                      
                        $totalauditded=0;
                        $totalfatal=0;
                        $listau=$aucnt->result();   
                        $totalauditded+=$rpostclist->audited;
                        $totalfatal+=$rpostclist->cnfatal;
                        ?>
                          <tr>
                              <td><?php echo $rpostclist->agent_name;?></td>
                              <td><?php echo $rpostclist->audited;?></td>
                              <td><?php echo $rpostclist->cnfatal;?></td>
                              
                              <td>
                                
                                <table class="table table-bordered">
                                  <tr>
                                                        <?php  $i=1; foreach($listau as $raucnt) { ?>
                                      <th> Call <?php echo $i;?><br/><?php echo $raucnt->qa_agent;?><br/><?php echo $raucnt->qa_date; ?><br><a href="<?php echo base_url();?>home/viewticket/<?php echo $raucnt->unique_id;?>" class="btn btn-link" target="_blank" style="width:55px;height:30px;">View</a></th>
                                        <?php $i++;} ?>
                                  </tr>
                                  <tr>
                                    <?php $sum = 0; foreach($listau as $raucnt) { ?>
                                    <td><?php echo $raucnt->tot;
                                                          $sum += $raucnt->tot;?>%</td>
                                    <?php } ?>
                                  </tr>
                                
                                </table>
                              </td>
                            <td style="vertical-align:middle;font-weight:bold;font-size:20px;"><?php echo round($average=$sum/count($listau));?>%</td>
                          </tr>
                 
                        <?php } ?>
                        <tr>
                            <td></td>
                            <td style="font-size:16px;"><strong>Total:<?php echo $totalauditded;?></strong></td>
                            <td style="font-size:16px;"><strong>Total:<?php echo $totalfatal;?></strong></td>
                        </tr>
                        </tbody>
                    </table>
                    </div>
              </div>
                                    </div>

我用谷歌搜索但没有找到任何解决方案。我正在尝试在表格顶部保留一个水平条,因为它从数据库中获取许多难以滚动的数据。也许顶部和底部的水平滚动条也适合建议。

【问题讨论】:

标签: css codeigniter bootstrap-4


【解决方案1】:

【讨论】:

【解决方案2】:

我将容器轴更改为 180 度

<div class=" table-responsive"style="transform: rotateX(180deg);">
                
                  <table class="table table-striped" style="transform: rotateX(180deg);">```

【讨论】:

    【解决方案3】:
    <div class="table-responsive">
    

    改成

    <div class="table-responsive" style="overflow-y: scroll; overflow-x: auto">
    

    【讨论】:

      猜你喜欢
      • 2019-04-02
      • 1970-01-01
      • 2017-11-24
      • 2016-05-10
      • 1970-01-01
      • 2021-08-03
      • 1970-01-01
      • 2011-07-28
      • 1970-01-01
      相关资源
      最近更新 更多