¿Cómo hacer que la tabla Bootstrap 2 existente responda?

  • Método 1:

    Para hacer que la tabla responda en todos los tamaños de ventana gráfica, envuelva la tabla dentro de etiquetas <div> de apertura y cierre, con la clase «table-responsive» dentro de la etiqueta <div> de apertura.

    Sintaxis:

    <div class="table-responsive">
      <table class="table">
        ...
      </table>
    </div>
    

    Ejemplo: el ejemplo describe la clase «table-responsive».

    <!DOCTYPE html> 
    <html lang="en"
    <head
        <!-- Required meta tags -->
        <meta charset="utf-8"
        <meta name="viewport"
              content="width=device-width, 
                       initial-scale=1
                       shrink-to-fit=no"> 
      
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" 
              href=
              integrity=
    "sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 
              crossorigin="anonymous"
      
        <title>Bootstrap | Tables</title
      
        <style
        h1{ 
            color:blue; 
            text-align: center; 
        
        div{ 
            margin-top: 20px; 
        
        </style
      
    </head
    <body
        <div class="container"
        <h1>Bootstrap Table Responsive</h1
      
        <!-- table-responsive -->
        <div class="table-responsive"
              
            <!-- table -->
            <table class="table"
            <thead
                <tr
                <th scope="col">Head</td
                <th scope="col">Head</td
                <th scope="col">Head</td
                <th scope="col">Head</td
                <th scope="col">Head</td
                <th scope="col">Head</td
                <th scope="col">Head</td
                <th scope="col">Head</td
                <th scope="col">Head</td
                <th scope="col">Head</td
                <th scope="col">Head</td
                <th scope="col">Head</td
                </tr
            </thead
            <tbody
                <tr
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                </tr
                <tr
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                </tr
                <tr
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                </tr
            </tbody
            </table
      
        </div
        </div
    </body
    </html>

    Producción:

    Cuando el tamaño de la ventana es normal:

    Cuando el tamaño de la ventana es pequeño, es decir, en modo tableta:

    La barra de desplazamiento aparecerá tanto en la tableta como en el modo móvil.

  • Método 2: punto de interrupción específico

    Use .table-responsive{-sm|-md|-lg|-xl} según sea necesario para crear tablas receptivas hasta un punto de interrupción particular. A partir de ese punto de interrupción, la tabla se comportará normalmente y no se desplazará horizontalmente.

    Clase Ancho de pantalla
    .table-responsive-sm < 576px
    .table-responsive-md < 768px
    .table-responsive-lg < 992 píxeles
    .table-responsive-xl < 1200px

    Sintaxis:

    <div class="table-responsive-sm">
      <table class="table">
        ...
      </table>
    </div>
    

    Ejemplo: El ejemplo describe la clase «table-responsive-sm».

    <!DOCTYPE html> 
    <html lang="en"
    <head
        <!-- Required meta tags -->
        <meta charset="utf-8"
        <meta name="viewport"
              content="width=device-width, 
              initial-scale=1
              shrink-to-fit=no"> 
      
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" 
              href=
              integrity=
    "sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 
              crossorigin="anonymous"
      
        <title>Bootstrap | Tables</title
      
        <style
        h1{ 
            color:blue; 
            text-align: center; 
        
        div{ 
            margin-top: 20px; 
        
        </style
      
    </head
    <body
        <div class="container"
        <h1>Bootstrap Table Responsive-sm</h1
      
        <!-- table-responsive -->
        <div class="table-responsive-sm"
              
            <!-- table -->
            <table class="table"
            <thead
                <tr
                <th scope="col">Head</td
                <th scope="col">Head</td
                <th scope="col">Head</td
                <th scope="col">Head</td
                <th scope="col">Head</td
                <th scope="col">Head</td
                <th scope="col">Head</td
                <th scope="col">Head</td
                <th scope="col">Head</td
                <th scope="col">Head</td
                <th scope="col">Head</td
                <th scope="col">Head</td
                </tr
            </thead
            <tbody
                <tr
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                </tr
                <tr
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                </tr
                <tr
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                <td>Data</td
                </tr
            </tbody
            </table
      
        </div
        </div
    </body
    </html>

    Producción:

    cuando el tamaño de la ventana es > 576px:

    Cuando el tamaño de la ventana es inferior a <576px:

Publicación traducida automáticamente

Artículo escrito por deepak710agarwal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *