Open In App

Bulma Table Container

Improve
Improve
Like Article
Like
Save
Share
Report

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:

Bulma Table container

Bulma Table container

Reference: https://bulma.io/documentation/elements/table/#table-container



Last Updated : 30 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads