Логотип Berry CSSBerry CSS 3.0

Таблицы typography utilities

Text Text Text
Text Text Text
Text Text Text
Text Text Text
<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>

Text Text Text
Text Text Text
Text Text Text
Text Text Text
<table class="table-border-none">
    ...

Text Text Text
Text Text Text
Text Text Text
Text Text Text
<table class="table-border">
...

Text Text Text
Text Text Text
Text Text Text
Text Text Text
Text Text Text
<table class="table-striped table-hover">
...

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

    <tr class="bg-pink100">
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
    </tr>
    
    <tr class="bg-pink200">
        <td>Text</td>
        <td colspan="2" class="bg-purple400 t-white">Text text</td>
    </tr>
    
    <tr class="bg-pink300">
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table>

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
<div class="overflow-x-auto">
    <table>
    ...
    </table>
</div>

Text Text Text
Text Text Text
Text Text Text
Text Text Text
<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>
    
    ...
</table>

Text caption
Text Text Text
Text Text Text
<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>

Text Text Text
Text Text Text
Text Text Text
Text Text Text
Text Text Text
<div class="bor1 bor-solid bor-pink rounded10 pad10 bg-pink400">

    <table class="bor1 bor-solid bor-pink t-pink700 table-striped table-hover table-border" style="
    --table-striped-odd-bg: #f9cae2; 
    --table-striped-even-bg: #fef8fb; 
    --table-tr-hover-bg: #f6b3d5; 
    --table-tr-border-bottom: #f6b3d5 1px solid;
    --table-td-border-right: #f5aad0 1px solid;
    --table-th-border-right: #ee50a0 1px solid;">
        <thead>
            <tr class="bor-none bg-pink t-white">
                <th>Text</th>
                <th>Text</th>
                <th>Text</th>
            </tr>
        </thead>

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

    </table>
</div>