Kempo CSS Icon Kempo CSS Theme Editor

Kempo CSS

Kempo CSS Icon
Typography
Paragraphs Headings Text Markup Text Decoration Lists
Layout
Display Flexbox Grid System Responsive Grid Alternative Responsive Grid
Borders & Spacing
Borders Border Radius Padding Margins Negative Margins Cancelled Margins
Inputs
Basic Inputs Labels Checkbox / Radio
Buttons
Button Types Button Colors Button Sizes Button Groups No Styles
Tables
Basic Table Responsive Table
Colors
Background Text Colors
Elevation
Z-Index Shadow Elevation Background Combined Example CSS Variables
Utilities
Disable Body Scrolling
Read the License
View on NPM
View on GitHub

Tables

Basic Table

<table>
  <thead>
    <tr>
      <th>Field 1</th>
      <th>Field 2</th>
      <th>Field 3</th>
      <th>Field 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 - Data 1</td>
      <td>Row 1 - Data 2</td>
      <td>Row 1 - Data 3</td>
      <td>Row 1 - Data 4</td>
    </tr>
    <tr>
      <td>Row 2 - Data 1</td>
      <td>Row 2 - Data 2</td>
      <td>Row 2 - Data 3</td>
      <td>Row 2 - Data 4</td>
    </tr>
    <tr>
      <td>Row 3 - Data 1</td>
      <td>Row 3 - Data 2</td>
      <td>Row 3 - Data 3</td>
      <td>Row 3 - Data 4</td>
    </tr>
  </tbody>
</table>
Field 1 Field 2 Field 3 Field 4
Row 1 - Data 1 Row 1 - Data 2 Row 1 - Data 3 Row 1 - Data 4
Row 2 - Data 1 Row 2 - Data 2 Row 2 - Data 3 Row 2 - Data 4
Row 3 - Data 1 Row 3 - Data 2 Row 3 - Data 3 Row 3 - Data 4

Responsive Table

<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>Field 1</th>
        <th>Field 2</th>
        <th>Field 3</th>
        <th>Field 4</th>
        <th>Field 5</th>
        <th>Field 6</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1 - Data 1</td>
        <td>Row 1 - Data 2</td>
        <td>Row 1 - Data 3</td>
        <td>Row 1 - Data 4</td>
        <td>Row 1 - Data 5</td>
        <td>Row 1 - Data 6</td>
      </tr>
      <tr>
        <td>Row 2 - Data 1</td>
        <td>Row 2 - Data 2</td>
        <td>Row 2 - Data 3</td>
        <td>Row 2 - Data 4</td>
        <td>Row 2 - Data 5</td>
        <td>Row 2 - Data 6</td>
      </tr>
      <tr>
        <td>Row 3 - Data 1</td>
        <td>Row 3 - Data 2</td>
        <td>Row 3 - Data 3</td>
        <td>Row 3 - Data 4</td>
        <td>Row 3 - Data 5</td>
        <td>Row 3 - Data 6</td>
      </tr>
    </tbody>
  </table>
</div>
Field 1 Field 2 Field 3 Field 4 Field 5 Field 6
Row 1 - Data 1 Row 1 - Data 2 Row 1 - Data 3 Row 1 - Data 4 Row 1 - Data 5 Row 1 - Data 6
Row 2 - Data 1 Row 2 - Data 2 Row 2 - Data 3 Row 2 - Data 4 Row 2 - Data 5 Row 2 - Data 6
Row 3 - Data 1 Row 3 - Data 2 Row 3 - Data 3 Row 3 - Data 4 Row 3 - Data 5 Row 3 - Data 6