TABLE PRESETS MADE WITH MOD CSS

It is very simple to design your own table design with MOD CSS. You can design any table style with MOD CSS. Below, you will see some examples with HTML code.

To get the code snippet, click to right, on icon

Simple Fluid Table

Simple table with dotted border and custom background.
We use setting of selector function to design fast th and td elements.

                        
    // we set selector th and td
    <div :var="th, td { tx.al[center] bd[.25px dotted #808080] }"></div>
    
    // Add table
    <table :box="w[100%]">
        <tr :box="th { bg[#3d4353] }">
            {% for h in header %}
            <th>{{h}}</th>
            {% endfor %}
        </tr>

        {% for d in data %}
        <tr>
            {% for i in d %}
            <td>{{i}}</td>
            {% endfor %}
        </tr>
        {% endfor %}    
    </table>
    
                    

Border collapsing

Here, we want to set separation between cells. For this, we use border-collapse property to set space between cells.
bd.cp = separate

                    
    // we set selector
    <div :var="th, td{ tx.al[center] bd[.25px dotted #808080] }"></div>
    
    //we set border separation
    <table :box="w[100%] bd.cp[separate]">
        <tr>
            {% for h in header %}
            <th :box="bg[#3d4353]">{{h}}</th>
            {% endfor %}
        </tr>

        {% for d in data %}
        <tr>
            {% for i in d %}
            <td>{{i}}</td>
            {% endfor %}
        </tr>
        {% endfor %}
    </table>
    
                

Colored table with MOD-CSS

We removed dotted border to use solid. On thead, we added background-color and bold effect on title. on cells, we used previous example settings with different background-color.

                    
    // Design a table quickly
    <table :box="w[100%] bd.cp[collapse]">
        <thead :box="bg[#198754] fo.wg[bold]">
            <tr :box="th{ p[4px]}">
               ...
            </tr>
        </thead>

        <tbody :box="bg[#f4f4f4] co[#202020] fo.sz[.75rem] tx.al[center]">
            {% for d in data %}
            <tr :box="td{ bd.bt[.25px solid lightgray] p[4px] }">
               ...
            </tr>
            {% endfor %}    
        </tbody>
    </table>
    
                

With hover effects

We reused previous example by changing background color on thead. To add hover effect on rows, set this on tr with custom background color.

In this example on hover, backgroundchange and font-weight switch to bold.
PS: You can also add hover effect on cells only. In this case, define it on th.
See code snippet below.

                        
    // Setting selectors
    <div :var="th{ p[8px 4px]}"></div>
    <div :var="tr{ hover:bg[lightgray] co[blue] fo.wg[bold] }"></div>
    <div :var="td{ bd.bt[.25px solid lightgray] p[4px] }"></div>

    // Set table
    <table :box="w[100%] bd.cp[collapse]">
        <thead :box="bg[#195bff] co[white] fo.wg[bold]"> <!-- Header -->
            ...
        </thead>

        <tbody :box="bg[#f4f4f4] co[#202020] fo.sz[.75rem] tx.al[center]"><!-- Data -->
            ...  
        </tbody>
    </table> 
    
                    

Striped table with MOD-CSS

Now, we are going to see how to do striped table with MOD CSS.
For this, on each row (tr) we use the CSS pseudo-classes nth-child(even) set with background-color.

                    
    // Same previous example with different tr
    <div :var="tr{ hover:fo.wg[700] co[#198754] bg[#0bcf8466] && nth-child(even):bg[lightgray] }"></div>

    ... 
    
                

Table with space between cells

We are going to set separation between cells to set custom table style. We are going to use again border-collapse.
This model has hover effect. It's combines all setup used previously. Just copy to use in your project

                    
    // setting selectors
    <div :var="th{ p[8px 4px]}"></div>
    <div :var="tr{ m[.5rem] bg[#f4f4f4] br[10px] && hover:bg[#0bcf8466] && hover:co[white] fo.wg[700] }"></div>
    <div :var="td{ p[4px] br[4px] }"></div>
    
    // Table with thead and tbody
    <table :box="w[100%] bd.cp[separate] bd.sp[3px]">            
        <thead :box="co[white]">
            ...
        </thead>

        <tbody :box="co[#202020] fo.sz[.75rem] tx.al[center]">
           ...
        </tbody>
    </table> 
    
                

Original table style with MOD-CSS

This last model use special structure because we don't use HTML table but rather ul/ol.
Inside them, we put data in li and only them are stylised.

                        
    //Setting classnames
    <div :var=".th { p[4px 1rem] ls[none] co[#404440] fo.wg[bold] }"></div>
    <div :var=".tb { ls[none] co[black] m[1rem 0] p[4px 1rem] br[20px] bg[#909090] && hover:bg[#0bcf8466] co[#198754] fo.wg[bold] }"></div>

    // set elements
    <div :box="bg[lightgray] br[8px] p[.5rem] w[100%]">     
       
        <ol :mod="row[100% 1%]" class="th"><!-- Heading -->
            {% for h in header %}
            <li :mod="col[24%]">{{h}}</li>
            {% endfor %}
        </ol>
        
        {% for li in body %}
        <ul :mod="row[100% 1%]" class="tb"><!-- Body -->
            {% for x in li %}
            <li :mod="col[24%]" >{{x}}</li>
            {% endfor %}
        </ul>
        {% endfor %}
                
    </div>