The Bulma Table container class is used to set or active the scroll by wrapping up the wider table. To wrap a table with in a container you have to put your table element inside of div element and set class of table-container in the div element.
Bulma Table Container class:
- table-container: This class is used to create a scrollable table by wrapping a table.
Syntax:
<div class="table-container"> <table class="table"> <!-- Your table content --> </table> </div>
Below example Bulma Table container:
Example:
HTML
<!DOCTYPE html> < html >
< head >
< link rel = 'stylesheet'
href =
</ 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 >
|
Output:
Reference: https://bulma.io/documentation/elements/table/#table-container