Tables

Responsiveness

By default tables are elements that tries to fill the container they placed in and has no responsiveness. To make your tables scrollable, depending on screen sizes, you can wrap them with an element with .jtbTable-container class.

                    <!-- Creating responsive table -->
<div class='jtbTable-container'>
    <table class='jtbTable'>
        ...
    </table>
</div>
                

No Hover

As evident from the examples above, table elements in JTB_MD come with hoverable rows, enhancing the visibility and differentiation of row elements within the table body. To disable this feature, you can add the .jtbTable-nohover class to your table element.

                    <!-- Creating table with hover disabled -->
<table class='jtbTable jtbTable-nohover'>...</table>
                

Striped

This form imparts a zebra-like stripe pattern to the rows of the table. To facilitate easier distinction between rows, you can apply this style by adding the .jtbTable-striped class to your table element.

                    <!-- Creating table with striped rows -->
<table class='jtbTable jtbTable-striped'>...</table>
                

If you want to make columns striped instead of rows, you can add .jtbTable-striped-columns class instead of .jtbTable-striped class.

                    <!-- Creating table with striped columns -->
<table class='jtbTable jtbTable-columns'>...</table>
                

Bordered

To make borders activated in all edges of cells, you can simply add .jtbTable-bordered class into your table

                    <!-- Creating bordered table -->
<table class='jtbTable jtbTable-bordered'>...</table>
                

Borderless

To remove all borders and seperators from table, you can simply add .jtbTable-borderless class into your table element.

                    <!-- Creating borderless table -->
<table class='jtbTable jtbTable-borderless'>...</table>
                

Equal Columns

To make your column widths all equal, you can add .jtbTable-equal class into your table element.

                    <!-- Creating table with equal columns -->
<table class='jtbTable jtbTable-equal'>...</table>
                

Ellipsis

If you want to make your cell content do not exceed one row, you can include .jtbTable-ellipsis class into your table element.

                    <!-- Creating table with ellipsis cells -->
<table class='jtbTable jtbTable-ellipsis'>...</table>
                

Centered

To make your content of cells all centered, you can apply .jtbTable-centered class into your table element.

                    <!-- Creating table with centered contents -->
<table class='jtbTable jtbTable-centered'>...</table>
                

Sizes

To make your table cells smaller or larger than default you can use one of the pre-defined table classes:

.jtbTable-[ xs | sm | md | lg | xl ]

                                <!-- Sized table (xs) -->
<table class='jtbTable jtbTable-xs'>...</table>
                            

Sticky Elements

If you have a table with a fixed height and overflowing content, you can make specific elements of the table sticky by adding the .sticky class to them. This feature allows these elements to remain fixed at the top of the container while scrolling through the content.

You can apply the .sticky class into individual tr elements or directly to a section like thead.

                    <!-- Fixed height table with sticky thead & sticky row -->
<div class='jtbTable-container' style='max-height: 400px;'>
    <table class='jtbTable'>
        <thead class='sticky'>
            ...
        </thead>
        <tbody>
            ...
            <tr class='sticky'>
                ...
            </tr>
            ...
        </tbody>
    </table>
</div>
                

Editable Cells

Enable cell editing functionality within your project efficiently by applying the .editable class to the desired container element. Upon class application, JTB_MD automatically grants editing capabilities to all nested cells within that container, streamlining the content editing process.

                    <!-- Editable cells -->
<table class='jtbTable'>
    ...
    <tbody>
        ...
        <tr class='editable'> <!-- Makes all cells under tr editable -->
            ...
        </tr>
        ...
    </tbody>
</table>