flag
X logo
Menu
Home Icons Contact
Docs
Typography
Responsive
Containers Grid Align Display
Navigation
Topnav Sidenav Slide down nav Verticale nav Fullscreen nav Buttons Pagination
Pictures
Images Animation Parallax Sliteshow Thumbnail
Helpers
Helpers Padding Margin
More
Accordion Borders Cards Colors Form List Popup modal Table Tooltips

Table


Introduction

With the CSS Framework table you can display nicely designed tables.


Click on the Class name to copy it.

bordered Class to at a border
overflow-x-auto Class to make the table responsive

Example


Basic table

Table head Table head
Text Text
Text Text
Text Text
Text Text
Text Text

Example code:

<table>
  <tr>
    <th>Table head</th>
    <th>Table head</th>
  </tr>
  <tr>
    <td>Text</td>
    <td>Text</td>
  </tr>
</table>

Table bordered

Table head Table head
Text Text
Text Text
Text Text
Text Text
Text Text

Example code:

<table class="bordered">
  <tr>
    <th>Table head</th>
    <th>Table head</th>
  </tr>
  <tr>
    <td>Text</td>
    <td>Text</td>
  </tr>
</table>

Table responsive and bordered

First Name Last Name Points Points Points Points Points Points Points Points Points Points
Jill Smith 50 50 50 50 50 50 50 50 50 50
Eve Jackson 94 94 94 94 94 94 94 94 94 94
Adam Johnson 67 67 67 67 67 67 67 67 67 67

Example code:

<div class="overflow-x-auto">
<table class="bordered">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
    <th>Points</th>
    <th>Points</th>
    <th>Points</th>
    <th>Points</th>
    <th>Points</th>
    <th>Points</th>
    <th>Points</th>
    <th>Points</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
    <td>50</td>
    <td>50</td>
    <td>50</td>
    <td>50</td>
    <td>50</td>
    <td>50</td>
    <td>50</td>
    <td>50</td>
    <td>50</td>
  </tr>
  ...
  ...
</table>
</div>


© Copyright by Web Henkie
All right reserved
Webmaster