MaxSite Plus
Additional blocks for Berry CSS, Albireo CMS and MF-template
Home / Berry CSS Helpers
Berry CSS Berry CSS Builder

Default

Text Text Text
Text Text Text
Text Text Text
Text Text Text

table-border-none

Text Text Text
Text Text Text
Text Text Text
Text Text Text

table-border

Text Text Text
Text Text Text
Text Text Text
Text Text Text

table-striped table-hover

Text Text Text
Text Text Text
Text Text Text
Text Text Text
Text Text Text

Colors

Text Text Text
Text Text Text
Text Text text
Text Text Text

overflow

Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text
Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text

table-layout-fixed

Text Text Text
Text Text Text
Text Text Text
Text Text Text

table-caption-bottom

Text caption
Text Text Text
Text Text Text

Custom

Text Text Text
Text Text Text
Text Text Text
Text Text Text
Text Text Text 
<h2>Default</h2>

<table>
    <thead>
        <tr>
            <th>Text</th>
            <th>Text</th>
            <th>Text</th>
        </tr>
    </thead>

    <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
    </tr>

    <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
    </tr>

    <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table>


<h2>table-border-none</h2>

<table class="table-border-none">
    <thead>
        <tr>
            <th>Text</th>
            <th>Text</th>
            <th>Text</th>
        </tr>
    </thead>

    <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
    </tr>

    <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
    </tr>

    <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table>


<h2>table-border</h2>

<table class="table-border">
    <thead>
        <tr>
            <th>Text</th>
            <th>Text</th>
            <th>Text</th>
        </tr>
    </thead>

    <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
    </tr>

    <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
    </tr>

    <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table>


<h2>table-striped table-hover</h2>

<table class="table-striped table-hover">
    <thead>
        <tr>
            <th>Text</th>
            <th>Text</th>
            <th>Text</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>

        <tr>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>

        <tr>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>

        <tr>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>
    <tbody>
</table>


<h2>Colors</h2>

<table class="table-border-none">
    <thead>
        <tr class="bor-none bg-primary500 t-white">
            <th>Text</th>
            <th>Text</th>
            <th>Text</th>
        </tr>
    </thead>

    <tr class="bg-primary100">
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
    </tr>

    <tr class="bg-primary200">
        <td>Text</td>
        <td colspan="2" class="bg-primary400 t-white">Text text</td>
    </tr>

    <tr class="bg-primary300">
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table>


<h2>overflow</h2>

<div class="overflow-x-auto">
    <table class="t-nowrap">
        <thead>
            <tr>
                <th>Text text</th>
                <th>Text text</th>
                <th>Text text</th>
                <th>Text text</th>
                <th>Text text</th>
                <th>Text text</th>
                <th>Text text</th>
                <th>Text text</th>
                <th>Text text</th>
                <th>Text text</th>
                <th>Text text</th>
                <th>Text text</th>
                <th>Text text</th>
                <th>Text text</th>
            </tr>
        </thead>

        <tr>
            <td>Text text</td>
            <td>Text text</td>
            <td>Text text</td>
            <td>Text text</td>
            <td>Text text</td>
            <td>Text text</td>
            <td>Text text</td>
            <td>Text text</td>
            <td>Text text</td>
            <td>Text text</td>
            <td>Text text</td>
            <td>Text text</td>
            <td>Text text</td>
            <td>Text text</td>
        </tr>
    </table>
</div>


<h2>table-layout-fixed</h2>

<table class="table-layout-fixed">
    <thead>
        <tr>
            <th class="w100px">Text</th>
            <th class="w200px">Text</th>
            <th>Text</th>
        </tr>
    </thead>

    <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
    </tr>

    <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
    </tr>

    <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table>


<h2>table-caption-bottom</h2>

<table class="table-caption-bottom">
    <caption>Text caption</caption>
    <tr>
        <th>Text</th>
        <th>Text</th>
        <th>Text</th>
    </tr>

    <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table>


<h2>Custom</h2>

<div class="bor1 bor-solid bor-primary rounded10 pad10 bg-primary400">
    <table class="bor1 bor-solid bor-primary t-primary700 table-striped table-hover table-border" style="--table-striped-odd-bg: var(--primary100); --table-striped-even-bg: var(--primary200); --table-tr-hover-bg: var(--primary400); --table-tr-border-bottom: var(--primary100) 1px solid; --table-td-border-right: var(--primary100) 1px solid; --table-th-border-right: var(--primary100) 1px solid;">

        <thead>
            <tr class="bor-none bg-primary t-white">
                <th>Text</th>
                <th>Text</th>
                <th>Text</th>
            </tr>
        </thead>

        <tr>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>

        <tr>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>

        <tr>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>

        <tr>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>
    </table>
</div>
MaxSite.org © 2006-2026