Foundation CSS es un marco front-end receptivo y de código abierto creado por ZURB en septiembre de 2011 que simplifica la creación de sorprendentes sitios web, aplicaciones y correos electrónicos receptivos que funcionan en cualquier dispositivo. Muchas empresas, como Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. Este marco se basa en bootstrap, que es similar a SaaS. Es más complejo, versátil y configurable. También viene con una interfaz de línea de comandos, lo que facilita su uso con paquetes de módulos. El marco de correo electrónico le proporciona correos electrónicos HTML receptivos, que se pueden leer en cualquier dispositivo. Foundation for Apps le permite crear aplicaciones web totalmente receptivas.
Las tablas Foundation CSS se utilizan para organizar los datos tabulares en forma de filas y columnas. Podemos obtener fácilmente cualquier valor de tabla usando las filas y columnas. Scrolling Table permite el desplazamiento horizontal en nuestra tabla. Para habilitar el desplazamiento, agregue la clase .table-scroll al elemento. En este artículo, discutiremos la tabla de desplazamiento Foundation CSS.
Clase de tabla de desplazamiento Foundation CSS:
- desplazamiento de tabla: esta clase se utiliza para habilitar el desplazamiento horizontal en la tabla.
Sintaxis:
<div class="table-scroll"> <table> ... </table> </div>
Ejemplo 1: el siguiente código demuestra la tabla de desplazamiento CSS de Foundation.
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Scrolling Table</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous" /> </head> <body> <center> <h2 style="color: green"> GeeksforGeeks </h2> <h3>Foundation CSS Scrolling Table</h3> <div class="table-scroll"> <table> <thead> <tr> <th>GFG 1</th> <th>GFG 2</th> <th>GFG 3</th> <th>GFG 4</th> <th>GFG 5</th> <th>GFG 6</th> <th>GFG 7</th> <th>GFG 8</th> <th>GFG 9</th> <th>GFG 10</th> <th>GFG 11</th> <th>GFG 12</th> <th>GFG 13</th> </tr> </thead> <tbody> <tr> <td>C++</td> <td>GeeksforGeeks1</td> <td>Dart</td> <td>Java</td> <td>GFG</td> <td>GeeksforGeeks2</td> <td>GeeksforGeeks3</td> <td>GeeksforGeeks4</td> <td>GeeksforGeeks5</td> <td>GeeksforGeeks6</td> <td>GeeksforGeeks7</td> <td>GeeksforGeeks8</td> <td>GeeksforGeeks9</td> </tr> <tr> <td>Data Structure</td> <td>Coding</td> <td>GeeksforGeeks</td> <td>GeeksforGeeks</td> <td>GeeksforGeeks</td> <td>GeeksforGeeks</td> <td>GeeksforGeeks</td> <td>GeeksforGeeks</td> <td>GeeksforGeeks</td> <td>GeeksforGeeks</td> <td>GeeksforGeeks</td> <td>GeeksforGeeks</td> <td>GeeksforGeeks</td> </tr> </tbody> </table> </div> </center> </body> </html>
Producción:
Tabla de desplazamiento Foundation CSS
Ejemplo 2: el siguiente código demuestra la tabla de desplazamiento de CSS de Foundation con enlaces, botones, más filas y más columnas .
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Scrolling Table</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous" /> </head> <body> <center> <h2 style="color: green"> GeeksforGeeks </h2> <h3>Foundation CSS Scrolling Table</h3> <div class="table-scroll"> <table> <thead> <tr> <th>GFG 1</th> <th>GFG 2</th> <th>GFG 3</th> <th>GFG 4</th> <th>GFG 5</th> <th>GFG 6</th> <th>GFG 7</th> <th>GFG 8</th> <th>GFG 9</th> <th>GFG 10</th> <th>GFG 11</th> <th>GFG 12</th> <th>GFG 13</th> <th>GFG 14</th> <th>GFG 15</th> </tr> </thead> <tbody> <tr> <td>C++</td> <td>GeeksforGeeks1</td> <td><a href="" class="button secondary">GFG</a></td> <td><a href="">GeeksforGeeks</a></td> <td>GeeksforGeeks</td> <td>GeeksforGeeks2</td> <td><a href="">GeeksforGeeks1</a></td> <td>GeeksforGeeks4</td> <td><a href="" class="button warning">GFG</a></td> <td>GeeksforGeeks6</td> <td>GeeksforGeeks7</td> <td><a href="" class="button alert">GeeksforGeeks</a></td> <td>GeeksforGeeks9</td> <td>GeeksforGeeks9</td> </tr> <tr> <td>Data Structure</td> <td><a href="">GFG Link</a></td> <td>GeeksforGeeks</td> <td>GeeksforGeeks</td> <td><a href="" class="button">GFG</a></td> <td>GeeksforGeeks</td> <td>GeeksforGeeks</td> <td>GeeksforGeeks</td> <td><a href="">Open GFG</a></td> <td>GeeksforGeeks</td> <td>GeeksforGeeks</td> <td><a href="">Link Gfg</a></td> <td>GeeksforGeeks</td> <td>GeeksforGeeks</td> <td>GeeksforGeeks</td> </tr> <tr> <td>Python</td> <td><a href="" class="button">Button</a></td> <td>GeeksforGeeks.org</td> <td>GeeksforGeeks.org</td> <td>Flutter</td> <td>GeeksforGeeks.org</td> <td></td> <td>GeeksforGeeks.org</td> <td></td> <td>GeeksforGeeks.org</td> <td>GeeksforGeeks.org</td> <td>GeeksforGeeks.org</td> <td>GeeksforGeeks.org</td> <td>GeeksforGeeks.org</td> </tr> </tbody> </table> </div> </center> </body> </html>
Producción:
Tabla de desplazamiento Foundation CSS
Referencia: https://get.foundation/sites/docs/table.html#scrolling-table
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA