Fractal Starter
Project version : 0.1.2

Table 

<table>
    <thead>
        <tr>
            <th>Column title</th>
            <th>Column title</th>
            <th>Column title</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
        </tr>
        <tr>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
        </tr>
        <tr>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
        </tr>
    </tbody>
</table>
 
<table>
    <thead>
        <tr>
            <th>Column title</th>
            <th>Column title</th>
            <th>Column title</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
        </tr>
        <tr>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
        </tr>
        <tr>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
        </tr>
    </tbody>
</table>
 
{
  "table": {
    "text": "This is a link"
  }
}
  • Content: 
    table{
    width: 100%;
    margin-bottom: 1rem;
    background-color: white;
    border-collapse: collapse;

    th,
    td {
        padding: 1rem;
        vertical-align: top;
        border-top: 1px solid $c-background-light;
    }

    thead th {
        vertical-align: bottom;
        border-top: none;
        border-bottom: 2px solid $c-background-light;
    }

    tbody tr:first-child td{
        border-top: none;
    }

    tbody + tbody {
        border-top: 2px solid $c-background-light;
    }

    tbody tr:hover td{
        background-color: $c-table-hover;
    }
}
  • URL: /components/raw/table/_table.scss
  • Filesystem Path: components/04-elements/01-typography/06-table/_table.scss
  • Size: 583 Bytes

There are no notes for this item.