Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
La tabla es un diseño de celda básico que contiene datos en filas y columnas. Foundation CSS proporciona varias variaciones de elementos <table> con las clases predefinidas, como una tabla básica, una tabla de franjas, una tabla de estado flotante, una tabla de desplazamiento y una tabla apilada. En este artículo, aprenderemos sobre la variación de la tabla apilada.
La tabla apilada es un diseño de tabla que apila sus celdas una encima de la otra en pantallas pequeñas para que el diseño responda y sea coherente en todos los tamaños de pantalla. Para convertir una tabla básica de Foundation CSS en una tabla apilable, usamos la clase stack. La clase .stack se usa dentro del elemento <table> de HTML.
Foundation CSS Clase de tabla apilada:
- stack: esta clase convierte una tabla básica en una tabla apilable donde todas las celdas se apilan una debajo de la otra en tamaños de pantalla más pequeños.
Sintaxis:
<table class="stack"> </table>
Ejemplo 1: Esta es una demostración básica de una tabla apilable en Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <!-- Compressed JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"> </script> </head> <body style="padding: 30px;"> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Foundation CSS Stackable table</strong> <br /><br /> </center> <table class="stack"> <thead> <tr> <th width="200">Table Header</th> <th>Table Header</th> <th width="150">Table Header</th> </tr> </thead> <tbody> <tr> <td>GeeksforGeeks</td> <td>It contains well written, well thought and well explained computer science and programming articles</td> <td>A Computer Science portal for geeks.</td> </tr> <tr> <td>GeeksforGeeks</td> <td>It contains well written, well thought and well explained computer science and programming articles</td> <td>A Computer Science portal for geeks.</td> </tr> <tr> <td>GeeksforGeeks</td> <td>It contains well written, well thought and well explained computer science and programming articles</td> <td>A Computer Science portal for geeks.</td> </tr> <tr> <td>GeeksforGeeks</td> <td>It contains well written, well thought and well explained computer science and programming articles</td> <td>A Computer Science portal for geeks.</td> </tr> </tbody> </table> <script> $(document).foundation(); </script> </body> </html>
Producción:
Ejemplo 2: Esta es una demostración básica de una tabla apilable sin rayas en Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <!-- Compressed JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"> </script> </head> <body style="padding: 30px;"> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Foundation CSS Stackable table</strong> <br /><br /> </center> <table class="stack unstriped"> <thead> <tr> <th width="200">Table Header</th> <th>Table Header</th> <th width="150">Table Header</th> </tr> </thead> <tbody> <tr> <td>GeeksforGeeks</td> <td>It contains well written, well thought and well explained computer science and programming articles</td> <td>A Computer Science portal for geeks.</td> </tr> <tr> <td>GeeksforGeeks</td> <td>It contains well written, well thought and well explained computer science and programming articles</td> <td>A Computer Science portal for geeks.</td> </tr> <tr> <td>GeeksforGeeks</td> <td>It contains well written, well thought and well explained computer science and programming articles</td> <td>A Computer Science portal for geeks.</td> </tr> <tr> <td>GeeksforGeeks</td> <td>It contains well written, well thought and well explained computer science and programming articles</td> <td>A Computer Science portal for geeks.</td> </tr> </tbody> </table> <script> $(document).foundation(); </script> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/table.html#stacked-table
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA