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

I googled but didn't find any solutions. What i'am trying is to keep a horizontal bar at the top of the table since it fetches many data from the database its hard to scroll. Maybe both top and bottom horizontal scroll bar is also good for the suggestions.

CodePudding user response：

Use css

overflow-x : auto;

Reference

https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp

CodePudding user response：

<div class="table-responsive">

change to

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

CodePudding user response：

I changed my container axis to 180 Degree

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