Cochrane design system

Table

No notes defined.

<table>
    <tr>
        <th>Colours</th>
        <th>Sizes</th>
        <th>Breakpoints</th>
    </tr>
    <tr>
        <td>Yellow</td>
        <td>1em</td>
        <td>Mobile</td>
    </tr>
    <tr>
        <td>Blue</td>
        <td>2em</td>
        <td>Tablet</td>
    </tr>
    <tr>
        <td>Green</td>
        <td>3em</td>
        <td>Desktop</td>
    </tr>
</table>

<table>
    <tr>
        <th>Colours</th>
        <td>Yellow</td>
        <td>Blue</td>
        <td>Green</td>
    </tr>
    <tr>
        <th>Sizes</th>
        <td>1em</td>
        <td>2em</td>
        <td>3em</td>
    </tr>
    <tr>
        <th>Breakpoints</th>
        <td>Mobile</td>
        <td>Tablet</td>
        <td>Desktop</td>
    </tr>
</table>
 
<table>
    <tr>
        <th>Colours</th>
        <th>Sizes</th>
        <th>Breakpoints</th>
    </tr>
    <tr>
        <td>Yellow</td>
        <td>1em</td>
        <td>Mobile</td>
    </tr>
    <tr>
        <td>Blue</td>
        <td>2em</td>
        <td>Tablet</td>
    </tr>
    <tr>
        <td>Green</td>
        <td>3em</td>
        <td>Desktop</td>
    </tr>
</table>


<table>
    <tr>
        <th>Colours</th>
        <td>Yellow</td>
        <td>Blue</td>
        <td>Green</td>
    </tr>
    <tr>
        <th>Sizes</th>
        <td>1em</td>
        <td>2em</td>
        <td>3em</td>
    </tr>
    <tr>
        <th>Breakpoints</th>
        <td>Mobile</td>
        <td>Tablet</td>
        <td>Desktop</td>
    </tr>
</table>
  • Content: 
    


thead {
	border-bottom: 1px solid $grey--light;

	td, th {
		background: transparent;
	}
}

tfoot {
	border-top: 1px solid $grey--light;
}

tr {
	background: transparent;
	border-top: 1px solid $grey--light;

	&:nth-child(even) {
		background: transparent;
	}

}

td, th {
	padding: 1em;
}

th {
	background: transparent;
}

td {
	vertical-align: middle;
}
  • URL: /components/raw/table/_table.scss
  • Filesystem Path: app/components/02-components/table/_table.scss
  • Size: 361 Bytes