¿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=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" 
          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=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
          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 Cancelar la respuesta