Table Width
Use colspans to adjust the width of table cells. Make sure that a row's cell colspans equal 24.
Example
| The Herculoids | Spiderman | Thundercats | |||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Zandor | Firestar | Lion 'O | |||||||||||||||||||||
| Tara | Iceman | Cheetara | |||||||||||||||||||||
| Gloop | Lightwave | Pumyra | |||||||||||||||||||||
| Gleep: gleep gleep gleep gleep gleep gleep gleep gleep gleep gleep gleep gleep gleep gleep gleep gleep gleep gleep gleep | Videoman | Snarf | |||||||||||||||||||||
Markup: tables/table-width.html
<table class="table">
<thead class="table__header">
<tr class="table__row">
<th colspan="10" class="table__cell">The Herculoids</th>
<th colspan="7" class="table__cell">Spiderman</th>
<th colspan="7" class="table__cell">Thundercats</th>
</tr>
</thead>
<tbody>
<tr class="table__row">
<td colspan="10" class="table__cell">Zandor</td>
<td colspan="7" class="table__cell">Firestar</td>
<td colspan="7" class="table__cell">Lion 'O</td>
</tr>
<tr class="table__row">
<td colspan="10" class="table__cell">Tara</td>
<td colspan="7" class="table__cell">Iceman</td>
<td colspan="7" class="table__cell">Cheetara</td>
</tr>
<tr class="table__row">
<td colspan="10" class="table__cell">Gloop</td>
<td colspan="7" class="table__cell">Lightwave</td>
<td colspan="7" class="table__cell">Pumyra</td>
</tr>
<tr class="table__row">
<td colspan="10" class="table__cell">
Gleep: gleep gleep gleep gleep gleep gleep gleep
gleep gleep gleep gleep gleep gleep gleep gleep gleep
gleep gleep gleep
</td>
<td colspan="7" class="table__cell">Videoman</td>
<td colspan="7" class="table__cell">Snarf</td>
</tr>
</tbody>
</table>
Source:
tables/_tables.scss, line 55