Tables

The .crn-table-ui class includes the style applied to all the table elements.

The following class modifiers can be used to create table variations:

If you need to modify this element globally, use the _tables.scss file. IF NOT, overwrite styles using the stylesheet of each page.

CSS Class Description
.crn-table-ui basic style for tables
.single-table Apply styles for simple tables, for instance tables without headers
He-Man and Skeletor facts
January $100 $100 $100
February $80 $80 $100 

        
            <table class="crn-table-ui single-table">
                <caption>
                    <div>
                        He-Man and Skeletor facts
                    </div>
                </caption>
                <tbody>
                    <tr>
                        <td>January</td>
                        <td>$100</td>
                        <td>$100</td>
                        <td>$100</td>
                    </tr>
                    <tr>
                        <td>February</td>
                        <td>$80</td>
                        <td>$80</td>
                        <td>$100</td>
                    </tr>
                </tbody>
            </table>
He-Man and Skeletor facts
Type Created By Description Assigned To
Email 2022-11-10 {{value.user}} Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae inventore necessitatibus quas obcaecati est qui ea, labore beatae quae sint placeat odit et veritatis sit dolorem suscipit dolor ex. Enim! {{N/A}} 

        
            <table class="crn-table-ui">
                <caption>
                    <div>
                        He-Man and Skeletor facts
                    </div>
                </caption>
                <thead>
                    <tr>
                        <th width="10%">
                            Type
                        </th>
                        <th width="15%">
                            Created
                        </th>
                        <th width="15%">
                            By
                        </th>
                        <th width="35%">
                            Description
                        </th>
                        <th width="20%">
                            Assigned To
                        </th>
                    </tr>
                </thead>
                <tbody>
                <tr>   
                    <td width="10%">
                    Email
                    </td>
                    <td width="20%">
                    2022-11-10
                    </td>
                    <td width="6%">
                    {{value.user}}
                    </td>
                    <td width="45%">
                    Lorem ipsum 
                    </td>
                    <td width="6%">
                    {{N/A}}
                    </td>
                </tr>
                </tbody>
            </table>