College of Business Style Guide

Tables 

<table class="table">
    <thead>
        <tr>
            <th colspan="4" class="table__heading-cell">This is a heading</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table__row">
            <td class="table__cell">Row 1</td>
            <td colspan="2" class="table__cell">Information about something</td>
            <td class="table__cell">And this is important</td>
        </tr>
        <tr class="table__row">
            <td class="table__cell">Row 2</td>
            <td colspan="2" class="table__cell">Information about something</td>
            <td class="table__cell">And this is important</td>
        </tr>
        <tr class="table__row">
            <td class="table__cell">Row 3</td>
            <td colspan="2" class="table__cell">Information about something</td>
            <td class="table__cell">And this is important</td>
        </tr>
        <tr class="table__row">
            <td class="table__cell">Row 4</td>
            <td colspan="2" class="table__cell">Information about something</td>
            <td class="table__cell">And this is important</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="4" class="table__heading-cell table__footer-cell ">This is a table footer</th>
        </tr>
    </tfoot>
</table>
 
<table class="table">
    <thead>
    <tr>
        <th colspan="4" class="table__heading-cell">This is a heading</th>
    </tr>
    </thead>
    <tbody>
    <tr class="table__row">
        <td class="table__cell">Row 1</td>
        <td colspan="2" class="table__cell">Information about something</td>
        <td class="table__cell">And this is important</td>
    </tr>
    <tr class="table__row">
        <td class="table__cell">Row 2</td>
        <td colspan="2" class="table__cell">Information about something</td>
        <td class="table__cell">And this is important</td>
    </tr>
    <tr class="table__row">
        <td class="table__cell">Row 3</td>
        <td colspan="2" class="table__cell">Information about something</td>
        <td class="table__cell">And this is important</td>
    </tr>
    <tr class="table__row">
        <td class="table__cell">Row 4</td>
        <td colspan="2" class="table__cell">Information about something</td>
        <td class="table__cell">And this is important</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <th colspan="4" class="table__heading-cell table__footer-cell ">This is a table footer</th>
    </tr>
    </tfoot>
</table>
 
/* No context defined. */
  • Content: 
    .table {
    border-radius: 4px;
    border-spacing: 0;
    background-color: $grey_20;
    margin: $space 0;
    width: 100%;

    &__heading-cell {
        color: $black;
        font-weight: 700;
        padding: 1.2em;
        text-align: left;
    }

    &__row {
        &:nth-child(2n+1) {
            background-color: $white;
        }
        &:first-child td:first-child,
        &:first-child th:first-child {
            border-radius: 5px 0 0;
        }
    }

    &__cell,
    &__heading-cell {
        border: none;
        padding: $space;
    }
}
  • URL: /components/raw/tables/tables.scss
  • Filesystem Path: components/01-elements/06-tables/tables.scss
  • Size: 565 Bytes

No notes defined.