Scroll bar in HTML

Asked

Viewed 533 times

0

Good morning I would like to put a horizontal scroll bar in my html code because it does not appear on the page, as I can do, 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>

html

  • Your question is half vacant... but the horizontal scroll will only appear on the screen if the width of the child is greater than the width of the father... You could give more details?

  • When the table is displayed in the browser the numbers related to the <td align="center"><b>Batch Type</b></td> do not appear on the screen so I need a horizontal scroll bar so that the user can view the complete information.

  • Cara saw that you are using Bootstrap. Are you using any CSS other than Bootstrap CSS? Because this class content that you used on that Action <section class="content"> does not exist. In Bootstrap there is no class content, I believe that there you actually put the class container guy <section class="container"> that wouldn’t be it?

  • So I’m sorry I’m a little uneducated in this matter, but do I switch to "container" and then? Only this change does not make the scrollbar appear. How should I proceed?

  • Placing the Conteinar was for your table to fit completely inside the screen, without needing a scroll bar, because the content will be limited to the container width. But even changing your table is still "cutting" a piece I suggest you edit your question and include your full CSS. 'Cause only with what you put in the question is it hard to give you an accurate answer...

1 answer

0

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

Add the class around the table called: "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 documentation https://getbootstrap.com/docs/4.1/contenttables/#Always-Responsive

  • Just one remark... he’s using Bootstrap 3... https://getbootstrap.com/docs/3.3/css/#Tables-Responsive

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.