<table class="table--random">
<thead>
<tr>
<th class="table--cell-left">Heading 1</th>
<th class="table--cell-center">Heading 2</th>
<th class="table--cell-right">Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table--cell-left">Data 1</td>
<td class="table--cell-center">Data 2</td>
<td class="table--cell-right">Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</table>
<table class="table--random">
<thead>
<tr>
<th class="table--cell-left">Heading 1</th>
<th class="table--cell-center">Heading 2</th>
<th class="table--cell-right">Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table--cell-left">Data 1</td>
<td class="table--cell-center">Data 2</td>
<td class="table--cell-right">Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</table>
{
"name": "random"
}
table {
table-layout: fixed;
margin: 0 1.5rem;
width: 100%;
}
table,
th,
tr,
td {
border: 1px solid #000;
border-collapse: collapse;
padding: .5em;
}
.table--no-borders {
border: none;
border-collapse: collapse;
padding: .5em;
& th,
& tr,
& td {
border: none;
}
}
.table--centered {
& th,
& tr,
& td {
text-align: center;
}
}
.table--cell-center {
text-align: center;
}
.table--cell-left {
text-align: left;
}
.table--cell-right {
text-align: right;
}
No notes defined.