<div class="o-container">
<div class="c-table">
<table>
<thead>
<tr>
<th>The Very Best Eggnog</th>
<th>Serves 12</th>
<th>Serves 24</th>
</tr>
</thead>
<tbody>
<tr>
<td>Milk</td>
<td>1 quart</td>
<td>2 quart</td>
</tr>
<tr>
<td>Cinnamon Sticks</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>Vanilla Bean, Split</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>Cloves</td>
<td>5</td>
<td>10</td>
</tr>
<tr>
<td>Mace</td>
<td>10</td>
<td>20</td>
</tr>
<tr>
<td>Egg Yolks</td>
<td>12</td>
<td>24</td>
</tr>
<tr>
<td>Cups Sugar</td>
<td>1 1/2 cups</td>
<td>3 cups</td>
</tr>
<tr>
<td>Dark Rum</td>
<td>1 1/2 cups</td>
<td>3 cups</td>
</tr>
<tr>
<td>Brandy</td>
<td>1 1/2 cups</td>
<td>3 cups</td>
</tr>
<tr>
<td>Vanilla</td>
<td>1 tbsp</td>
<td>2 tbsp</td>
</tr>
<tr>
<td>Light Cream</td>
<td>1 quart</td>
<td>2 quart</td>
</tr>
<tr>
<td><a href="#nowhere">This is a link</a></td>
<td><strong>This is strong</strong></td>
<td><em>This is emphasis</em></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="o-container">
<div class="c-table">
<table>
<thead>
<tr>
<th>The Very Best Eggnog</th>
<th>Serves 12</th>
<th>Serves 24</th>
</tr>
</thead>
<tbody>
<tr>
<td>Milk</td>
<td>1 quart</td>
<td>2 quart</td>
</tr>
<tr>
<td>Cinnamon Sticks</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>Vanilla Bean, Split</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>Cloves</td>
<td>5</td>
<td>10</td>
</tr>
<tr>
<td>Mace</td>
<td>10</td>
<td>20</td>
</tr>
<tr>
<td>Egg Yolks</td>
<td>12</td>
<td>24</td>
</tr>
<tr>
<td>Cups Sugar</td>
<td>1 1/2 cups</td>
<td>3 cups</td>
</tr>
<tr>
<td>Dark Rum</td>
<td>1 1/2 cups</td>
<td>3 cups</td>
</tr>
<tr>
<td>Brandy</td>
<td>1 1/2 cups</td>
<td>3 cups</td>
</tr>
<tr>
<td>Vanilla</td>
<td>1 tbsp</td>
<td>2 tbsp</td>
</tr>
<tr>
<td>Light Cream</td>
<td>1 quart</td>
<td>2 quart</td>
</tr>
<tr>
<td><a href="#nowhere">This is a link</a></td>
<td><strong>This is strong</strong></td>
<td><em>This is emphasis</em></td>
</tr>
</tbody>
</table>
</div>
</div>
/* No context defined. */
/* ======================================================================
# _components.table.css
====================================================================== */
/***
* 1. Make table responsive
*/
.c-table {
@apply
overflow-x-auto /* [1] */
rounded
;
}
.c-table table {
@apply
bg-primary-100
text-tiny
rounded
min-w-full
;
@media print {
font-size: 10pt;
@apply
bg-transparent
;
}
}
.c-table table thead,
.c-table table tfoot {
@apply
bg-primary
text-white
font-bold
uppercase
;
@media print {
@apply
text-black
bg-transparent
;
}
}
.c-table table th,
.c-table table td {
@apply
text-left
p-4
;
}
.c-table table tr + tr {
@apply
border-primary-200
;
border-top-width: 1px;
}
.c-table a {
@extend %anchor;
&:focus {
@apply outline-focus;
}
}
No notes defined.