Wide tables
Making sure tables look good on mobile.
Tables can be created using normal GitHub-flavored markdown.
To prevent wide tables from breaking the book layout on mobile devices,
wrap them in a <div>
directly in the markdown file,
with class="table-wrapper"
and the attribute markdown="block"
.
<div class="table-wrapper" markdown="block">
| Semi-tones (frets) | Interval | Note from C | Short scale degree name | Scale degree name | Frequency ratio (dissonance) |
|:--:|:-------------------|:------:|:------:|:----------------------|:-----:|
| 0 | unison (P1) | C | 1 | tonic, one | 1:1 |
| 1 | minor second (m2) | C#/ Db | b2 | flat two | 25:24 |
| 2 | major second (M2) | D | 2 | two | 9:8 |
</div>
…renders as:
Semi-tones (frets) | Interval | Note from C | Short scale degree name | Scale degree name | Frequency ratio (dissonance) |
---|---|---|---|---|---|
0 | unison (P1) | C | 1 | tonic, one | 1:1 |
1 | minor second (m2) | C#/ Db | b2 | flat two | 25:24 |
2 | major second (M2) | D | 2 | two | 9:8 |
This file is located at: _chapters/010-chapterbook-theme/050-wide-tables.md