Open In App

Foundation CSS Scrolling Table

Improve
Improve
Like Article
Like
Save
Share
Report

Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This framework is based on bootstrap, which is similar to SaaS. It’s more complex, versatile, and configurable. It also comes with a command-line interface, making it simple to use with module bundlers. Email framework provides you with responsive HTML emails, which can be read on any device. Foundation for Apps allows you to build fully responsive web applications.

Foundation CSS Tables are used to arrange the tabular data in the form of rows and columns. We can easily get any table value using the rows and columns. Scrolling Table enables horizontal scrolling in our table. To enable scrolling, add the .table-scroll class to the element. In this article, we will discuss Foundation CSS Scrolling Table.

Foundation CSS Scrolling Table Class:

  • table-scroll: This class is used to enable horizontal scrolling in the table.

Syntax:

<div class="table-scroll">
  <table> ... </table>
</div>

Example 1: The following code demonstrates the Foundation CSS Scrolling Table.

HTML




<!DOCTYPE html>
<html>
  
<head>
  <title>Foundation CSS Scrolling Table</title>
  <!-- Compressed CSS -->
  <link rel="stylesheet" 
        href=
        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>


Output:

Foundation CSS Scrolling Table

Foundation CSS Scrolling Table

Example 2: The following code demonstrates the Foundation CSS Scrolling Table with links, buttons, more rows, and more columns.

HTML




<!DOCTYPE html>
<html>
  
<head>
  <title>Foundation CSS Scrolling Table</title>
    <!-- Compressed CSS -->
  <link rel="stylesheet"
        href=
        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>


Output:

Foundation CSS Scrolling Table

Foundation CSS Scrolling Table

Reference: https://get.foundation/sites/docs/table.html#scrolling-table



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