El .table-condensed es una clase en Bootstrap 3 Framework. Se puede usar cuando queremos tener la mitad del relleno de filas para que podamos condensar la tabla. Para que pueda ser más fácil de usar. Por lo tanto, la clase .table-condensed se usa cuando desea mostrar tablas más densas en páginas web. Si no usamos la clase .table-condensed en la tabla de arranque, cuando tenga una tabla densa e intente verla en dispositivos de pantalla pequeña, entonces debemos desplazarnos horizontalmente para ver las columnas ocultas, mientras que cuando la clase .table-condensed es utilizado, toda la tabla se condensa según el tamaño de su pantalla para que pueda obtener una vista completa de la tabla a la vez.
Sintaxis:
Para Bootstrap 3
<table class="table table-condensed">
Para Bootstrap 4
<table class="table table-sm">
Ejemplo 1: en este ejemplo, crearemos una tabla condensada en Bootstrap 3 utilizando una clase condensada de tabla.
HTML
<!DOCTYPE html> <html> <head> <title>Bootstrap Condensed Table</title> <meta name="viewport" content= "width = device-width, initial-scale = 1"> <!-- Include Bootstrap 3 and jQuery CDNs --> <link href= "https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> </head> <body> <!-- Include .table-condensed class after .table class in table tag--> <table class="table table-condensed"> <thead> <tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Iron</td> <td>Man</td> <td>ironman@mail.com</td> </tr> <tr> <td>2</td> <td>Captain</td> <td>America</td> <td>captainamerica@mail.com</td> </tr> <tr> <td>3</td> <td>Doctor</td> <td>Strange</td> <td>doctorstrange@mail.com</td> </tr> <tr> <td>4</td> <td>Black</td> <td>Widow</td> <td>blackwidow@mail.com</td> </tr> </tbody> </table> </body> </html>
Producción:
Ejemplo 2: en este ejemplo, crearemos una tabla condensada en Bootstrap 4 utilizando una clase table-sm.
HTML
<!DOCTYPE html> <html> <head> <title>Bootstrap Condensed Table</title> <meta name="viewport" content= "width = device-width, initial-scale = 1"> <!-- Include Bootstrap 4 and jQuery CDNs --> <link href= "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"> </script> </head> <body> <!-- Include .table-sm class after .table class in table tag--> <table class="table table-sm"> <thead> <tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Iron</td> <td>Man</td> <td>ironman@mail.com</td> </tr> <tr> <td>2</td> <td>Captain</td> <td>America</td> <td>captainamerica@mail.com</td> </tr> <tr> <td>3</td> <td>Doctor</td> <td>Strange</td> <td>doctorstrange@mail.com</td> </tr> <tr> <td>4</td> <td>Black</td> <td>Widow</td> <td>blackwidow@mail.com</td> </tr> </tbody> </table> </body> </html>
Producción: