Preview

Column Column Column Column
Lorem ipsum dolorem Lorem ipsum dolorem Lorem ipsum dolorem Lorem ipsum dolorem
Lorem ipsum dolorem Lorem ipsum dolorem Lorem ipsum dolorem Lorem ipsum dolorem
Lorem ipsum dolorem Lorem ipsum dolorem Lorem ipsum dolorem Lorem ipsum dolorem
Lorem ipsum dolorem Lorem ipsum dolorem Lorem ipsum dolorem Lorem ipsum dolorem
Lorem ipsum dolorem Lorem ipsum dolorem Lorem ipsum dolorem Lorem ipsum dolorem

Usage

<table class="table table-border">
    <thead>
        <tr>
            <th>Column</th>
            <th>Column</th>
            <th>Column</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Lorem ipsum dolorem</td>
            <td>Lorem ipsum dolorem</td>
            <td>Lorem ipsum dolorem</td>
        </tr>
        <tr>
            <td>Lorem ipsum dolorem</td>
            <td>Lorem ipsum dolorem</td>
            <td>Lorem ipsum dolorem</td>
        </tr>
        <tr>
            <td>Lorem ipsum dolorem</td>
            <td>Lorem ipsum dolorem</td>
            <td>Lorem ipsum dolorem</td>
        </tr>
    </tbody>
</table>

<table class="table table-grid table-border">
    <tbody>
        <tr>
            <td><img src="image.jpg" alt="" /></td>
            <td><img src="image.jpg" alt="" /></td>
            <td><img src="image.jpg" alt="" /></td>
        </tr>
        <tr>
            <td><img src="image.jpg" alt="" /></td>
            <td><img src="image.jpg" alt="" /></td>
            <td><img src="image.jpg" alt="" /></td>
        </tr>
    </tbody>
</table>

Settings

Name Type Description
Border table CSS Add the class table-border to the component to add a partial border to the table. Remove the class to hide all borders.
Try it Add borders Remove borders
Full border table CSS Add the class table-full-border to the component to add a partial border to the table.
Try it Add full borders
Columns table CSS Add the class table-columns to the component to convert the table to a generic container with the same layout of the columns and no design.
Try it Columns table
Responsive CSS Add the class table-full-sm to the component to make all cells full width and aligned vertically only on small screens.
Add the class table-md-6 or table-md-4 to the component to set 2 or 3 columns on medium and small screens.