La clase de contenedor Bulma Table se usa para configurar o activar el desplazamiento al envolver la tabla más ancha. Para envolver una tabla en un contenedor, debe colocar su elemento de tabla dentro del elemento div y establecer la clase de contenedor de tabla en el elemento div.
Clase de contenedor de mesa Bulma:
- table-container: esta clase se utiliza para crear una tabla desplazable envolviendo una tabla.
Sintaxis:
<div class="table-container">
<table class="table">
<!-- Your table content -->
</table>
</div>
Debajo del ejemplo del contenedor Bulma Table:
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body class="has-text-centered"> <h1 class="is-size-2 has-text-success" > GeeksforGeeks </h1> <b>Bulma Table Container</b> <div class="has-text-left ml-4 mr-4"> <div class="table-container"> <table class="table"> <tbody> <tr> <td class="tg-0lax">A</td> <td class="tg-0lax">B</td> <td class="tg-0lax">C</td> <td class="tg-0lax">D</td> <td class="tg-0lax">E</td> <td class="tg-0lax">F</td> <td class="tg-0lax">G</td> <td class="tg-0lax">H</td> <td class="tg-0lax">I</td> <td class="tg-0lax">J</td> <td class="tg-0lax">K</td> <td class="tg-0lax">L</td> <td class="tg-0lax">M</td> <td class="tg-0lax">N</td> <td class="tg-0lax">O</td> <td class="tg-0lax">P</td> <td class="tg-0lax">Q</td> <td class="tg-0lax">R</td> <td class="tg-0lax">S</td> <td class="tg-0lax">T</td> <td class="tg-0lax">U</td> <td class="tg-0lax">V</td> <td class="tg-0lax">W</td> <td class="tg-0lax">X</td> <td class="tg-0lax">Y</td> <td class="tg-0lax">Z</td> <td class="tg-0lax">1</td> <td class="tg-0lax">9</td> <td class="tg-0lax">9</td> <td class="tg-0lax">5</td> </tr> <tr> <td class="tg-0lax">a</td> <td class="tg-0lax">b</td> <td class="tg-0lax">c</td> <td class="tg-0lax">d</td> <td class="tg-0lax">e</td> <td class="tg-0lax">f</td> <td class="tg-0lax">g</td> <td class="tg-0lax">h</td> <td class="tg-0lax">i</td> <td class="tg-0lax">j</td> <td class="tg-0lax">k</td> <td class="tg-0lax">l</td> <td class="tg-0lax">m</td> <td class="tg-0lax">n</td> <td class="tg-0lax">o</td> <td class="tg-0lax">p</td> <td class="tg-0lax">q</td> <td class="tg-0lax">r</td> <td class="tg-0lax">s</td> <td class="tg-0lax">t</td> <td class="tg-0lax">u</td> <td class="tg-0lax">v</td> <td class="tg-0lax">w</td> <td class="tg-0lax">x</td> <td class="tg-0lax">y</td> <td class="tg-0lax">z</td> <td class="tg-0lax">1</td> <td class="tg-0lax">9</td> <td class="tg-0lax">9</td> <td class="tg-0lax">5</td> </tr> </tbody> </table> </div> </div> </body> </html>
Producción:
Contenedor de mesa Bulma
Referencia: https://bulma.io/documentation/elements/table/#table-container
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA