FR | EN
Install
Documentation

Documentation - Table.

Discover Marssel: an intelligent, minimal configuration CSS framework designed for fast interfaces and a simplified developer experience.

Startup

Basic concepts

Utilities

Components

Paintings

Tables allow you to organize and display structured data in a clear and readable way. Marssel offers two approaches for creating responsive tables: a version based on the grid system (col-row) which transforms into cards on mobile, and a classic table version with horizontal scrolling. Both approaches ensure excellent readability on all devices.

Basic table

Preview
Name E-mail Role
Jean Dupont jean@exemple.com Admin
Marie Curie marie@exemple.com Éditeur 
<table class="w-[100%] border-collapse-[collapse]">
    <thead>
        <tr>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Name</th>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">E-mail</th>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Role</th>
        </tr>
    </thead>
    <tbody>
        <tr class="border-b-[1px_solid_e0e0e0]">
            <td class="p-[12px]">Jean Dupont</td>
            <td class="p-[12px]">jean@exemple.com</td>
            <td class="p-[12px]">Admin</td>
        </tr>
        <tr class="border-b-[1px_solid_e0e0e0]">
            <td class="p-[12px]">Marie Curie</td>
            <td class="p-[12px]">marie@exemple.com</td>
            <td class="p-[12px]">Éditeur</td>
        </tr>
    </tbody>
</table>

Table with alternate style (striped)

Preview
Product Price Stock
Laptop 899€ 24
Wireless mouse 29€ 156
Mechanical keyboard 89€ 42 
<table class="w-[100%] border-collapse-[collapse]">
    <thead class="bg-[f8f8f8]">
        <tr>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Product</th>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Price</th>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Stock</th>
        </tr>
    </thead>
    <tbody>
        <tr class="bg-[f9f9f9]">
            <td class="p-[12px]">Laptop</td>
            <td class="p-[12px]">899€</td>
            <td class="p-[12px]">24</td>
        </tr>
        <tr class="bg-[fff]">
            <td class="p-[12px]">Wireless mouse</td>
            <td class="p-[12px]">29€</td>
            <td class="p-[12px]">156</td>
        </tr>
        <tr class="bg-[f9f9f9]">
            <td class="p-[12px]">Mechanical keyboard</td>
            <td class="p-[12px]">89€</td>
            <td class="p-[12px]">42</td>
        </tr>
    </tbody>
</table>

Table with hover

Preview
Name Job Department
Marie Dupont Developer Technology
Pierre Martin Designer Creation
Lucie Bernard Manager Marketing 
<table class="w-[100%] border-collapse-[collapse]">
    <thead class="bg-[f8f8f8]">
        <tr>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Name</th>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Job</th>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Department</th>
        </tr>
    </thead>
    <tbody>
        <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e0e0e0]">
            <td class="p-[12px]">Marie Dupont</td>
            <td class="p-[12px]">Developer</td>
            <td class="p-[12px]">Technology</td>
        </tr>
        <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e0e0e0]">
            <td class="p-[12px]">Pierre Martin</td>
            <td class="p-[12px]">Designer</td>
            <td class="p-[12px]">Creation</td>
        </tr>
        <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e0e0e0]">
            <td class="p-[12px]">Lucie Bernard</td>
            <td class="p-[12px]">Manager</td>
            <td class="p-[12px]">Marketing</td>
        </tr>
    </tbody>
</table>

Board with status badges

Preview
Name E-mail Status Date
John Dupont jean@exemple.com Active 2024-03-15
Marie Curie marie@exemple.com On hold 2024-03-14
Paul Martin paul@exemple.com Inactive 2024-03-13 
<table class="w-[100%] border-collapse-[collapse]">
    <thead class="bg-[f8f8f8]">
        <tr>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e2e2e2]">Name</th>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e2e2e2]">E-mail</th>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e2e2e2]">Status</th>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e2e2e2]">Date</th>
        </tr>
    </thead>
    <tbody>
        <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e2e2e2]">
            <td class="p-[12px]">John Dupont</td>
            <td class="p-[12px]">jean@exemple.com</td>
            <td class="p-[12px]">
                <span class="c-[28a745] bg-[e6f4ea] px-[8px] py-[4px] rounded-[12px] font-size-[14px]">Active</span>
            </td>
            <td class="p-[12px]">2024-03-15</td>
        </tr>
        <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e2e2e2]">
            <td class="p-[12px]">Marie Curie</td>
            <td class="p-[12px]">marie@exemple.com</td>
            <td class="p-[12px]">
                <span class="c-[ffc107] bg-[fff8e6] px-[8px] py-[4px] rounded-[12px] font-size-[14px]">On hold</span>
            </td>
            <td class="p-[12px]">2024-03-14</td>
        </tr>
        <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e2e2e2]">
            <td class="p-[12px]">Paul Martin</td>
            <td class="p-[12px]">paul@exemple.com</td>
            <td class="p-[12px]">
                <span class="c-[dc3545] bg-[fce8e8] px-[8px] py-[4px] rounded-[12px] font-size-[14px]">Inactive</span>
            </td>
            <td class="p-[12px]">2024-03-13</td>
        </tr>
    </tbody>
</table>

Responsive table with horizontal scroll

Preview
Name Job Department Status Date
Marie Dupont Front-end developer Technology Active 2024-03-15
Pierre Martin UI/UX designer Creation On hold 2024-03-14 
<div class="overflow-x-[auto] shadow-[0_2px_8px_rgba(0,0,0,0.1)] rounded-[8px]">
    <table class="w-[100%] min-w-[600px] border-collapse-[collapse]">
        <thead class="bg-[f8f8f8]">
            <tr>
                <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e2e2e2]">Name</th>
                <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e2e2e2]">Job</th>
                <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e2e2e2]">Department</th>
                <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e2e2e2]">Status</th>
                <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e2e2e2]">Date</th>
            </tr>
        </thead>
        <tbody>
            <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e2e2e2]">
                <td class="p-[12px]">Marie Dupont</td>
                <td class="p-[12px]">Front-end developer</td>
                <td class="p-[12px]">Technology</td>
                <td class="p-[12px]">
                    <span class="c-[28a745] bg-[e6f4ea] px-[8px] py-[2px] rounded-[12px]">Active</span>
                </td>
                <td class="p-[12px]">2024-03-15</td>
            </tr>
            <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e2e2e2]">
                <td class="p-[12px]">Pierre Martin</td>
                <td class="p-[12px]">UI/UX designer</td>
                <td class="p-[12px]">Creation</td>
                <td class="p-[12px]">
                    <span class="c-[ffc107] bg-[fff8e6] px-[8px] py-[2px] rounded-[12px]">On hold</span>
                </td>
                <td class="p-[12px]">2024-03-14</td>
            </tr>
        </tbody>
    </table>
</div>

Responsive table with grid (col-row)

Preview
Name
E-mail
Role
Status
Name: Jean Dupont
E-mail: jean@exemple.com
Role: Administrateur
Status: Active
Name: Marie Curie
E-mail: marie@exemple.com
Role: Éditeur
Status: On hold 
<!-- Transforms into maps on mobile -->
<div class="shadow-[0_1px_3px_rgba(0,0,0,0.1)] rounded-[8px] overflow-[hidden]">
    <!-- Header (hidden on mobile) -->
    <div class="col-[row] bg-[f8f8f8] p-[16px] border-b-[2px_solid_e2e2e2] d-[none] md--d-[flex]">
        <div class="col-[3] font-weight-[600] c-[333]">Name</div>
        <div class="col-[3] font-weight-[600] c-[333]">E-mail</div>
        <div class="col-[3] font-weight-[600] c-[333]">Role</div>
        <div class="col-[3] font-weight-[600] c-[333]">Status</div>
    </div>

    <!-- Line 1 -->
    <div class="col-[row] p-[16px] border-b-[1px_solid_e2e2e2] bg-[ffffff]:hover">
        <div class="col-[12] md--col-[3] mb-[8px] md--mb-[0]">
            <span class="font-weight-[600] md--d-[none]">Name: </span>Jean Dupont
        </div>
        <div class="col-[12] md--col-[3] mb-[8px] md--mb-[0]">
            <span class="font-weight-[600] md--d-[none]">E-mail: </span>jean@exemple.com
        </div>
        <div class="col-[12] md--col-[3] mb-[8px] md--mb-[0]">
            <span class="font-weight-[600] md--d-[none]">Role: </span>Administrateur
        </div>
        <div class="col-[12] md--col-[3]">
            <span class="font-weight-[600] md--d-[none]">Status: </span>
            <span class="c-[28a745]">Active</span>
        </div>
    </div>

    <!-- Line 2 -->
    <div class="col-[row] p-[16px] border-b-[1px_solid_e2e2e2] bg-[ffffff]:hover">
        <div class="col-[12] md--col-[3] mb-[8px] md--mb-[0]">
            <span class="font-weight-[600] md--d-[none]">Name: </span>Marie Curie
        </div>
        <div class="col-[12] md--col-[3] mb-[8px] md--mb-[0]">
            <span class="font-weight-[600] md--d-[none]">E-mail: </span>marie@exemple.com
        </div>
        <div class="col-[12] md--col-[3] mb-[8px] md--mb-[0]">
            <span class="font-weight-[600] md--d-[none]">Role: </span>Éditeur
        </div>
        <div class="col-[12] md--col-[3]">
            <span class="font-weight-[600] md--d-[none]">Status: </span>
            <span class="c-[ffc107]">On hold</span>
        </div>
    </div>
</div>

Table with actions

Preview
Name E-mail Role Actions
Jean Dupont jean@exemple.com Administrator
Marie Curie marie@exemple.com Editor 
<table class="w-[100%] border-collapse-[collapse]">
    <thead class="bg-[f8f8f8]">
        <tr>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Name</th>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">E-mail</th>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Role</th>
            <th class="p-[12px] text-align-[right] font-weight-[600] border-b-[2px_solid_e0e0e0]">Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e0e0e0]">
            <td class="p-[12px]">Jean Dupont</td>
            <td class="p-[12px]">jean@exemple.com</td>
            <td class="p-[12px]">Administrator</td>
            <td class="p-[12px] text-align-[right]">
                <button class="p-[6px_12px] bg-[0B63F3] c-[white] rounded-[4px] border-[none] cursor-[pointer] mr-[4px] bg-[2563eb]:hover">
                    Edit
                </button>
                <button class="p-[6px_12px] bg-[D41212] c-[white] rounded-[4px] border-[none] cursor-[pointer] bg-[dc2626]:hover">
                    DELETE
                </button>
            </td>
        </tr>
        <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e0e0e0]">
            <td class="p-[12px]">Marie Curie</td>
            <td class="p-[12px]">marie@exemple.com</td>
            <td class="p-[12px]">Editor</td>
            <td class="p-[12px] text-align-[right]">
                <button class="p-[6px_12px] bg-[0B63F3] c-[white] rounded-[4px] border-[none] cursor-[pointer] mr-[4px] bg-[2563eb]:hover">
                    Edit
                </button>
                <button class="p-[6px_12px] bg-[D41212] c-[white] rounded-[4px] border-[none] cursor-[pointer] bg-[dc2626]:hover">
                    DELETE
                </button>
            </td>
        </tr>
    </tbody>
</table>

Table with checkbox

A simple button with background and text

Preview
Product Category Price
MacBook Pro Computers 2 499€
iPad Air Tablets 699€ 
<table class="w-[100%] border-collapse-[collapse]">
    <thead class="bg-[f8f8f8]">
        <tr>
            <th class="p-[12px] w-[40px] border-b-[2px_solid_e0e0e0]">
                <input type="checkbox" class="cursor-[pointer]">
            </th>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Product</th>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Category</th>
            <th class="p-[12px] text-align-[right] font-weight-[600] border-b-[2px_solid_e0e0e0]">Price</th>
        </tr>
    </thead>
    <tbody>
        <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e0e0e0]">
            <td class="p-[12px]">
                <input type="checkbox" class="cursor-[pointer]">
            </td>
            <td class="p-[12px]">MacBook Pro</td>
            <td class="p-[12px]">Computers</td>
            <td class="p-[12px] text-align-[right] font-weight-[600]">2 499€</td>
        </tr>
        <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e0e0e0]">
            <td class="p-[12px]">
                <input type="checkbox" class="cursor-[pointer]">
            </td>
            <td class="p-[12px]">iPad Air</td>
            <td class="p-[12px]">Tablets</td>
            <td class="p-[12px] text-align-[right] font-weight-[600]">699€</td>
        </tr>
    </tbody>
</table>

Table with custom scrollbar

Preview
Product Description Category Stock Price
Laptop Intel Core i7, 16GB RAM, 512GB SSD Computer science 24 1 299€ 
<style>
    .custom-scrollbar::-webkit-scrollbar {
        height: 8px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
        background: #f0f0f0;
        border-radius: 4px;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: #c0c0c0;
        border-radius: 4px;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background: #a0a0a0;
    }
</style>
<div class="overflow-x-[auto] custom-scrollbar rounded-[8px] shadow-[0_2px_8px_rgba(0,0,0,0.1)]">
    <table class="w-[100%] min-w-[800px] border-collapse-[collapse]">
        <thead class="bg-[f8f8f8]">
            <tr>
                <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Product</th>
                <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Description</th>
                <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Category</th>
                <th class="p-[12px] text-align-[right] font-weight-[600] border-b-[2px_solid_e0e0e0]">Stock</th>
                <th class="p-[12px] text-align-[right] font-weight-[600] border-b-[2px_solid_e0e0e0]">Price</th>
            </tr>
        </thead>
        <tbody>
            <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e0e0e0]">
                <td class="p-[12px]">Laptop</td>
                <td class="p-[12px]">Intel Core i7, 16GB RAM, 512GB SSD</td>
                <td class="p-[12px]">Computer science</td>
                <td class="p-[12px] text-align-[right]">24</td>
                <td class="p-[12px] text-align-[right] font-weight-[600]">1 299€</td>
            </tr>
        </tbody>
    </table>
</div>

Table with footer

Preview
Product Quantity Unit price Total
MacBook Pro 2 2 499€ 4 998€
Magic Mouse 3 89€ 267€
Grand total: 5 265€ 
<table class="w-[100%] border-collapse-[collapse] shadow-[0_2px_8px_rgba(0,0,0,0.1)] rounded-[8px] overflow-[hidden]">
    <thead class="bg-[f8f8f8]">
        <tr>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Product</th>
            <th class="p-[12px] text-align-[right] font-weight-[600] border-b-[2px_solid_e0e0e0]">Quantity</th>
            <th class="p-[12px] text-align-[right] font-weight-[600] border-b-[2px_solid_e0e0e0]">Unit price</th>
            <th class="p-[12px] text-align-[right] font-weight-[600] border-b-[2px_solid_e0e0e0]">Total</th>
        </tr>
    </thead>
    <tbody>
        <tr class="border-b-[1px_solid_e0e0e0]">
            <td class="p-[12px]">MacBook Pro</td>
            <td class="p-[12px] text-align-[right]">2</td>
            <td class="p-[12px] text-align-[right]">2 499€</td>
            <td class="p-[12px] text-align-[right] font-weight-[600]">4 998€</td>
        </tr>
        <tr class="border-b-[1px_solid_e0e0e0]">
            <td class="p-[12px]">Magic Mouse</td>
            <td class="p-[12px] text-align-[right]">3</td>
            <td class="p-[12px] text-align-[right]">89€</td>
            <td class="p-[12px] text-align-[right] font-weight-[600]">267€</td>
        </tr>
    </tbody>
    <tfoot class="bg-[f8f8f8]">
        <tr>
            <td colspan="3" class="p-[12px] text-align-[right] font-weight-[700] border-t-[2px_solid_e0e0e0]">
                Grand total:
            </td>
            <td class="p-[12px] text-align-[right] font-weight-[700] font-size-[18px] c-[0B63F3] border-t-[2px_solid_e0e0e0]">
                5 265€
            </td>
        </tr>
    </tfoot>
</table>

Compact board

Preview
ID Name Status
#001 Jean Dupont ✓
#002 Marie Curie ✗ 
<table class="w-[100%] border-collapse-[collapse]">
    <thead class="bg-[f8f8f8]">
        <tr>
            <th class="p-[8px] text-align-[left] font-weight-[600] font-size-[14px] border-b-[2px_solid_e0e0e0]">ID</th>
            <th class="p-[8px] text-align-[left] font-weight-[600] font-size-[14px] border-b-[2px_solid_e0e0e0]">Name</th>
            <th class="p-[8px] text-align-[left] font-weight-[600] font-size-[14px] border-b-[2px_solid_e0e0e0]">Status</th>
        </tr>
    </thead>
    <tbody>
        <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e0e0e0]">
            <td class="p-[8px] font-size-[14px]">#001</td>
            <td class="p-[8px] font-size-[14px]">Jean Dupont</td>
            <td class="p-[8px] font-size-[14px]">
                <span class="c-[28a745]">✓</span>
            </td>
        </tr>
        <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e0e0e0]">
            <td class="p-[8px] font-size-[14px]">#002</td>
            <td class="p-[8px] font-size-[14px]">Marie Curie</td>
            <td class="p-[8px] font-size-[14px]">
                <span class="c-[D41212]">✗</span>
            </td>
        </tr>
    </tbody>
</table>

Table with images

Preview
Product Description Price
Produit MacBook Pro
High performance laptop 2 499€ 
<table class="w-[100%] border-collapse-[collapse]">
    <thead class="bg-[f8f8f8]">
        <tr>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Product</th>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Description</th>
            <th class="p-[12px] text-align-[right] font-weight-[600] border-b-[2px_solid_e0e0e0]">Price</th>
        </tr>
    </thead>
    <tbody>
        <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e0e0e0]">
            <td class="p-[12px]">
                <div class="d-[flex] items-[center] gap-[12px]">
                    <img src="https://placehold.co/60x60"
                    class="w-[60px] h-[60px] rounded-[8px] object-[cover]"
                    alt="Produit">
                    <span class="font-weight-[500]">MacBook Pro</span>
                </div>
            </td>
            <td class="p-[12px] c-[666]">High performance laptop</td>
            <td class="p-[12px] text-align-[right] font-weight-[600]">2 499€</td>
        </tr>
    </tbody>
</table>
← Previous Cards
Next → Header

Cookie settings

Choose the data you want to share.

🙏 Analytics help us prioritize the right features — data in Switzerland, never resold.

Essentials Required

Necessary for operation (session, security).