@ou-imdt/css
Version:
The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.
979 lines (929 loc) • 17.8 kB
Markdown
# table
It is recommended that thead and tbody tags are used for improved semantics; it should be noted that user-agents will try and automatically insert a tbody tag if it is excluded.
The caption element specifies the caption (or title) of a table. If used the caption element 'MUST' be the first child of the table.
The the table is contained within a figure a figcaption should be used instead.
You can position the caption visually using the caption-side css property or by changing the --caption-side variable.
The utility class '.striped' when applied to the table will alternatively stripe table rows using custom properties (--striped-odd-bg, --striped-odd-fg, --striped-even-bg, --striped-even-fg).
There are also properties for row hover background and foreground specific to tables
When the 'static-headings' class is applied to a table horizontal overflow will scroll while vertical overflow will resize, if an explicit height is specified on the table element, scroll will become enabled along with sticky headers.
<mark>In versions previous to 2.0.0 this was applied automatically, but now the addition of a 'static-headings' class on the table is required: This decision was made to better support full-width tables by default as that is more common than static headings.</mark>
## Examples
### Simple Table
<div class="card">
<table>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>
</div>
<details class="compact">
<summary>HTML</summary>
```html
<table>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>
```
</details>
### Simple with head, body and foot
<div class="card">
<table>
<thead>
<tr>
<th>Header content 1</th>
<th>Header content 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Body content 1</td>
<td>Body content 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer content 1</td>
<td>Footer content 2</td>
</tr>
</tfoot>
</table>
</div>
<details class="compact">
<summary>HTML</summary>
```html
<table>
<thead>
<tr>
<th>Header content 1</th>
<th>Header content 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Body content 1</td>
<td>Body content 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer content 1</td>
<td>Footer content 2</td>
</tr>
</tfoot>
</table>
```
</details>
### Table with odd rows and row hover enabled
<div class="card">
<table class="striped" style="--table-tr-hover-bg: coral;--table-tr-hover-fg: black; ">
<thead>
<tr>
<th>Header content 1</th>
<th>Header content 2</th>
</tr>
</thead>
<tbody>
<tr>
<th>Body content 1</th>
<td>Body content 2</td>
</tr>
<tr>
<th>Body content 1</th>
<td>Body content 2</td>
</tr>
<tr>
<th>Body content 1</th>
<td>Body content 2</td>
</tr>
<tr>
<th>Body content 1</th>
<td>Body content 2</td>
</tr>
</tbody>
</table>
</div>
<details class="compact">
<summary>HTML</summary>
```html
<table class="striped" style="--table-tr-hover-bg: coral;--table-tr-hover-fg: black; ">
<thead>
<tr>
<th>Header content 1</th>
<th>Header content 2</th>
</tr>
</thead>
<tbody>
<tr>
<th>Body content 1</th>
<td>Body content 2</td>
</tr>
<tr>
<th>Body content 1</th>
<td>Body content 2</td>
</tr>
<tr>
<th>Body content 1</th>
<td>Body content 2</td>
</tr>
<tr>
<th>Body content 1</th>
<td>Body content 2</td>
</tr>
</tbody>
</table>
```
</details>
### Simple with colgroup and col
<div class="card">
<table>
<colgroup>
<col style="background-color: green">
<col span="2">
</colgroup>
<tr>
<th>Lime</th>
<th>Lemon</th>
<th>Orange</th>
</tr>
<tr>
<td>Green</td>
<td>Yellow</td>
<td>Orange</td>
</tr>
</table>
</div>
<details class="compact">
<summary>HTML</summary>
```html
<table>
<colgroup>
<col style="background-color: green">
<col span="2">
</colgroup>
<tr>
<th>Lime</th>
<th>Lemon</th>
<th>Orange</th>
</tr>
<tr>
<td>Green</td>
<td>Yellow</td>
<td>Orange</td>
</tr>
</table>
```
</details>
### Table Captions
<div class="card">
<table>
<caption>
<small>Example Caption</small>
</caption>
<tr>
<th>Login</th>
<th>Email</th>
</tr>
<tr>
<td>user1</td>
<td>user1@sample.com</td>
</tr>
<tr>
<td>user2</td>
<td>user2@sample.com</td>
</tr>
</table>
</div>
<details class="compact">
<summary>HTML</summary>
```html
<table>
<caption>
<small>Example Caption</small>
</caption>
<tr>
<th>Login</th>
<th>Email</th>
</tr>
<tr>
<td>user1</td>
<td>user1@sample.com</td>
</tr>
<tr>
<td>user2</td>
<td>user2@sample.com</td>
</tr>
</table>
```
</details>
### Tables with static headings
<div class="card">
<table class="static-headings" style="max-height: 200px">
<thead>
<tr>
<th>1<sup>3</sup> equals:
</th>
<th>2<sup>3</sup> equals:
</th>
<th>3<sup>3</sup> equals:
</th>
<th>4<sup>3</sup> equals:
</th>
<th>5<sup>3</sup> equals:
</th>
<th>6<sup>3</sup> equals:
</th>
<th>7<sup>3</sup> equals:
</th>
</tr>
</thead>
<tbody>
<tr>
<th>row 1: 1
</th>
<td>row 1: 8
</td>
<td>row 1: 27
</td>
<td>row 1: 64
</td>
<td>row 1: 125
</td>
<td>row 1: 216
</td>
<td>row 1: 343
</td>
</tr>
<tr>
<th>row 2: 1
</th>
<td>row 2: 8
</td>
<td>row 2: 27
</td>
<td>row 2: 64
</td>
<td>row 2: 125
</td>
<td>row 2: 216
</td>
<td>row 2: 343
</td>
</tr>
<tr>
<th>row 3: 1
</th>
<td>row 3: 8
</td>
<td>row 3: 27
</td>
<td>row 3: 64
</td>
<td>row 3: 125
</td>
<td>row 3: 216
</td>
<td>row 3: 343
</td>
</tr>
<tr>
<td>row 4: 1
</td>
<td>row 4: 8
</td>
<td>row 4: 27
</td>
<td>row 4: 64
</td>
<td>row 4: 125
</td>
<td>row 4: 216
</td>
<td>row 4: 343
</td>
</tr>
<tr>
<td>row 5: 1
</td>
<td>row 5: 8
</td>
<td>row 5: 27
</td>
<td>row 5: 64
</td>
<td>row 5: 125
</td>
<td>row 5: 216
</td>
<td>row 5: 343
</td>
</tr>
<tr>
<td>row 6: 1
</td>
<td>row 6: 8
</td>
<td>row 6: 27
</td>
<td>row 6: 64
</td>
<td>row 6: 125
</td>
<td>row 6: 216
</td>
<td>row 6: 343
</td>
</tr>
<tr>
<td>row 7: 1
</td>
<td>row 7: 8
</td>
<td>row 7: 27
</td>
<td>row 7: 64
</td>
<td>row 7: 125
</td>
<td>row 7: 216
</td>
<td>row 7: 343
</td>
</tr>
<tr>
<td>row 8: 1
</td>
<td>row 8: 8
</td>
<td>row 8: 27
</td>
<td>row 8: 64
</td>
<td>row 8: 125
</td>
<td>row 8: 216
</td>
<td>row 8: 343
</td>
</tr>
<tr>
<td>row 9: 1
</td>
<td>row 9: 8
</td>
<td>row 9: 27
</td>
<td>row 9: 64
</td>
<td>row 9: 125
</td>
<td>row 9: 216
</td>
<td>row 9: 343
</td>
</tr>
<tr>
<td>row 10: 1
</td>
<td>row 10: 8
</td>
<td>row 10: 27
</td>
<td>row 10: 64
</td>
<td>row 10: 125
</td>
<td>row 10: 216
</td>
<td>row 10: 343
</td>
</tr>
<tr>
<td>row 11: 1
</td>
<td>row 11: 8
</td>
<td>row 11: 27
</td>
<td>row 11: 64
</td>
<td>row 11: 125
</td>
<td>row 11: 216
</td>
<td>row 11: 343
</td>
</tr>
<tr>
<td>row 12: 1
</td>
<td>row 12: 8
</td>
<td>row 12: 27
</td>
<td>row 12: 64
</td>
<td>row 12: 125
</td>
<td>row 12: 216
</td>
<td>row 12: 343
</td>
</tr>
<tr>
<td>row 13: 1
</td>
<td>row 13: 8
</td>
<td>row 13: 27
</td>
<td>row 13: 64
</td>
<td>row 13: 125
</td>
<td>row 13: 216
</td>
<td>row 13: 343
</td>
</tr>
<tr>
<td>row 14: 1
</td>
<td>row 14: 8
</td>
<td>row 14: 27
</td>
<td>row 14: 64
</td>
<td>row 14: 125
</td>
<td>row 14: 216
</td>
<td>row 14: 343
</td>
</tr>
<tr>
<td>row 15: 1
</td>
<td>row 15: 8
</td>
<td>row 15: 27
</td>
<td>row 15: 64
</td>
<td>row 15: 125
</td>
<td>row 15: 216
</td>
<td>row 15: 343
</td>
</tr>
<tr>
<td>row 16: 1
</td>
<td>row 16: 8
</td>
<td>row 16: 27
</td>
<td>row 16: 64
</td>
<td>row 16: 125
</td>
<td>row 16: 216
</td>
<td>row 16: 343
</td>
</tr>
<tr>
<td>row 17: 1
</td>
<td>row 17: 8
</td>
<td>row 17: 27
</td>
<td>row 17: 64
</td>
<td>row 17: 125
</td>
<td>row 17: 216
</td>
<td>row 17: 343
</td>
</tr>
<tr>
<td>row 18: 1
</td>
<td>row 18: 8
</td>
<td>row 18: 27
</td>
<td>row 18: 64
</td>
<td>row 18: 125
</td>
<td>row 18: 216
</td>
<td>row 18: 343
</td>
</tr>
<tr>
<td>row 19: 1
</td>
<td>row 19: 8
</td>
<td>row 19: 27
</td>
<td>row 19: 64
</td>
<td>row 19: 125
</td>
<td>row 19: 216
</td>
<td>row 19: 343
</td>
</tr>
<tr>
<td>row 20: 1
</td>
<td>row 20: 8
</td>
<td>row 20: 27
</td>
<td>row 20: 64
</td>
<td>row 20: 125
</td>
<td>row 20: 216
</td>
<td>row 20: 343
</td>
</tr>
</tbody>
</table>
</div>
<details class="compact">
<summary>HTML</summary>
```html
<div class="card">
<table class="static-headings" style="max-height: 200px">
<thead>
<tr>
<th>1<sup>3</sup> equals:
</th>
<th>2<sup>3</sup> equals:
</th>
<th>3<sup>3</sup> equals:
</th>
<th>4<sup>3</sup> equals:
</th>
<th>5<sup>3</sup> equals:
</th>
<th>6<sup>3</sup> equals:
</th>
<th>7<sup>3</sup> equals:
</th>
</tr>
</thead>
<tbody>
<tr>
<th>row 1: 1
</th>
<td>row 1: 8
</td>
<td>row 1: 27
</td>
<td>row 1: 64
</td>
<td>row 1: 125
</td>
<td>row 1: 216
</td>
<td>row 1: 343
</td>
</tr>
<tr>
<th>row 2: 1
</th>
<td>row 2: 8
</td>
<td>row 2: 27
</td>
<td>row 2: 64
</td>
<td>row 2: 125
</td>
<td>row 2: 216
</td>
<td>row 2: 343
</td>
</tr>
<tr>
<th>row 3: 1
</th>
<td>row 3: 8
</td>
<td>row 3: 27
</td>
<td>row 3: 64
</td>
<td>row 3: 125
</td>
<td>row 3: 216
</td>
<td>row 3: 343
</td>
</tr>
<tr>
<td>row 4: 1
</td>
<td>row 4: 8
</td>
<td>row 4: 27
</td>
<td>row 4: 64
</td>
<td>row 4: 125
</td>
<td>row 4: 216
</td>
<td>row 4: 343
</td>
</tr>
<tr>
<td>row 5: 1
</td>
<td>row 5: 8
</td>
<td>row 5: 27
</td>
<td>row 5: 64
</td>
<td>row 5: 125
</td>
<td>row 5: 216
</td>
<td>row 5: 343
</td>
</tr>
<tr>
<td>row 6: 1
</td>
<td>row 6: 8
</td>
<td>row 6: 27
</td>
<td>row 6: 64
</td>
<td>row 6: 125
</td>
<td>row 6: 216
</td>
<td>row 6: 343
</td>
</tr>
<tr>
<td>row 7: 1
</td>
<td>row 7: 8
</td>
<td>row 7: 27
</td>
<td>row 7: 64
</td>
<td>row 7: 125
</td>
<td>row 7: 216
</td>
<td>row 7: 343
</td>
</tr>
<tr>
<td>row 8: 1
</td>
<td>row 8: 8
</td>
<td>row 8: 27
</td>
<td>row 8: 64
</td>
<td>row 8: 125
</td>
<td>row 8: 216
</td>
<td>row 8: 343
</td>
</tr>
<tr>
<td>row 9: 1
</td>
<td>row 9: 8
</td>
<td>row 9: 27
</td>
<td>row 9: 64
</td>
<td>row 9: 125
</td>
<td>row 9: 216
</td>
<td>row 9: 343
</td>
</tr>
<tr>
<td>row 10: 1
</td>
<td>row 10: 8
</td>
<td>row 10: 27
</td>
<td>row 10: 64
</td>
<td>row 10: 125
</td>
<td>row 10: 216
</td>
<td>row 10: 343
</td>
</tr>
<tr>
<td>row 11: 1
</td>
<td>row 11: 8
</td>
<td>row 11: 27
</td>
<td>row 11: 64
</td>
<td>row 11: 125
</td>
<td>row 11: 216
</td>
<td>row 11: 343
</td>
</tr>
<tr>
<td>row 12: 1
</td>
<td>row 12: 8
</td>
<td>row 12: 27
</td>
<td>row 12: 64
</td>
<td>row 12: 125
</td>
<td>row 12: 216
</td>
<td>row 12: 343
</td>
</tr>
<tr>
<td>row 13: 1
</td>
<td>row 13: 8
</td>
<td>row 13: 27
</td>
<td>row 13: 64
</td>
<td>row 13: 125
</td>
<td>row 13: 216
</td>
<td>row 13: 343
</td>
</tr>
<tr>
<td>row 14: 1
</td>
<td>row 14: 8
</td>
<td>row 14: 27
</td>
<td>row 14: 64
</td>
<td>row 14: 125
</td>
<td>row 14: 216
</td>
<td>row 14: 343
</td>
</tr>
<tr>
<td>row 15: 1
</td>
<td>row 15: 8
</td>
<td>row 15: 27
</td>
<td>row 15: 64
</td>
<td>row 15: 125
</td>
<td>row 15: 216
</td>
<td>row 15: 343
</td>
</tr>
<tr>
<td>row 16: 1
</td>
<td>row 16: 8
</td>
<td>row 16: 27
</td>
<td>row 16: 64
</td>
<td>row 16: 125
</td>
<td>row 16: 216
</td>
<td>row 16: 343
</td>
</tr>
<tr>
<td>row 17: 1
</td>
<td>row 17: 8
</td>
<td>row 17: 27
</td>
<td>row 17: 64
</td>
<td>row 17: 125
</td>
<td>row 17: 216
</td>
<td>row 17: 343
</td>
</tr>
<tr>
<td>row 18: 1
</td>
<td>row 18: 8
</td>
<td>row 18: 27
</td>
<td>row 18: 64
</td>
<td>row 18: 125
</td>
<td>row 18: 216
</td>
<td>row 18: 343
</td>
</tr>
<tr>
<td>row 19: 1
</td>
<td>row 19: 8
</td>
<td>row 19: 27
</td>
<td>row 19: 64
</td>
<td>row 19: 125
</td>
<td>row 19: 216
</td>
<td>row 19: 343
</td>
</tr>
<tr>
<td>row 20: 1
</td>
<td>row 20: 8
</td>
<td>row 20: 27
</td>
<td>row 20: 64
</td>
<td>row 20: 125
</td>
<td>row 20: 216
</td>
<td>row 20: 343
</td>
</tr>
</tbody>
</table>
```
</details>