HTML scrollbar

Navigation
0

Hello, I would like to put a horizontal scroll bar in my html code because it does not appear on the page, how can I do it, follow my code .... 

<ui:define name="conteudo">

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12"></div>
            <!-- /.box -->
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">Tipo de Lote Contábil</h3>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <table id="example1" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <td align="center"><b>Plano Conta</b></td>
                                <td align="center"><b>Carteira</b></td>
                                <td align="center"><b>Dt. Início Vigência</b></td>
                                <td align="center"><b>Dt. Fim Vigência</b></td>
                                <td align="center"><b>Tipo de Lote</b></td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td align="right">10</td>
                                <td align="right">1</td>
                                <td align="left">Ricardo</td>
                                <td align="right">1</td>
                                <td align="right">1</td>
                            </tr>
                            <tr>
                                <td align="right">2</td>
                                <td align="right">2</td>
                                <td align="left">Gabriel</td>
                                <td align="right">2</td>
                                <td align="right">2</td>
                            </tr>
                            <tr>
                                <td align="right">3</td>
                                <td align="right">3</td>
                                <td align="left">Pio</td>
                                <td align="right">3</td>
                                <td align="right">3</td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td align="center"><b>Plano Conta</b></td>
                                <td align="center"><b>Carteira</b></td>
                                <td align="center"><b>Dt. Início Vigência</b></td>
                                <td align="center"><b>Dt. Fim Vigência</b></td>
                                <td align="center"><b>Tipo de Lote</b></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col -->
    </section>
    <!-- /.content -->

</ui:define>

    
asked by anonymous 05.11.2018 / 12:24

1 answer

0

As you are using Bootstrap, you can leave only the responsive table if the parent element is smaller and depending on the width of the screen.

Adds the class around the table named: "table-responsive". 

<section class="content">
    <div class="row">
        <div class="col-xs-12"></div>
        <!-- /.box -->
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">Tipo de Lote Contábil</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div class="table-responsive">
                    <table id="example1" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <td>XXX</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td align="right">AAAA</td>
                            </tr>
                       </tbody>
                   </table>
               </div>
           </div>
       </div>
   </div>

Take a look at the link documentation

    
05.11.2018 / 13:45
Validate fields on the Modal Bootstrap 4 screen with Asp.Net MVC Upload FTP - PHP Progress bar