Skip to content

Instantly share code, notes, and snippets.

@boehs
Last active October 27, 2021 22:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save boehs/738aeed671392735bcabece59197f007 to your computer and use it in GitHub Desktop.
Save boehs/738aeed671392735bcabece59197f007 to your computer and use it in GitHub Desktop.
tables
<section>
<header>
<h1>Hi<wbr>ra<wbr>ga<wbr>na</h1>
<h2>some japanese chars</h2>
</header>
<div class="table-wrapper">
<table>
<tr>
<th></th>
<th>a</th>
<th>e</th>
<th>u</th>
<th>e</th>
<th>o</th>
</tr>
<tr>
<th>×</th>
<td>あ</td>
<td>い</td>
<td>う</td>
<td>え</td>
<td>お</td>
</tr>
<tr>
<th>k</th>
<td>か</td>
<td>き</td>
<td>く</td>
<td>け</td>
<td>こ</td>
</tr>
<tr>
<th>s</th>
<td>さ</td>
<td>し</td>
<td>す</td>
<td>せ</td>
<td>そ</td>
</tr>
<tr>
<th>t</th>
<td>た</td>
<td>ち</td>
<td>つ</td>
<td>て</td>
<td>と</td>
</tr>
<tr>
<th>n</th>
<td>な</td>
<td>に</td>
<td>ぬ</td>
<td>ね</td>
<td>の</td>
</tr>
<tr>
<th>h</th>
<td>は</td>
<td>ひ</td>
<td>ふ</td>
<td>へ</td>
<td>ほ</td>
</tr>
<tr>
<th>m</th>
<td>ま</td>
<td>み</td>
<td>む</td>
<td>め</td>
<td>も</td>
</tr>
<tr>
<th>y</th>
<td>や</td>
<td></td>
<td>ゆ</td>
<td></td>
<td>よ</td>
</tr>
<tr>
<th>r</th>
<td>ら</td>
<td>り</td>
<td>る</td>
<td>れ</td>
<td>ろ</td>
</tr>
<tr>
<th>w</th>
<td>わ</td>
<td></td>
<td></td>
<td></td>
<td>を</td>
</tr>
<tr>
<th></th>
<td>ん</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table>
<tr>
<th></th>
<th>a</th>
<th>e</th>
<th>u</th>
<th>e</th>
<th>o</th>
</tr>
<tr>
<th>×</th>
<td>あ</td>
<td>い</td>
<td>う</td>
<td>え</td>
<td>お</td>
</tr>
<tr>
<th>k</th>
<td>か</td>
<td>き</td>
<td>く</td>
<td>け</td>
<td>こ</td>
</tr>
<tr>
<th>s</th>
<td>さ</td>
<td>し</td>
<td>す</td>
<td>せ</td>
<td>そ</td>
</tr>
<tr>
<th>t</th>
<td>た</td>
<td>ち</td>
<td>つ</td>
<td>て</td>
<td>と</td>
</tr>
<tr>
<th>n</th>
<td>な</td>
<td>に</td>
<td>ぬ</td>
<td>ね</td>
<td>の</td>
</tr>
<tr>
<th>h</th>
<td>は</td>
<td>ひ</td>
<td>ふ</td>
<td>へ</td>
<td>ほ</td>
</tr>
<tr>
<th>m</th>
<td>ま</td>
<td>み</td>
<td>む</td>
<td>め</td>
<td>も</td>
</tr>
<tr>
<th>y</th>
<td>や</td>
<td></td>
<td>ゆ</td>
<td></td>
<td>よ</td>
</tr>
<tr>
<th>r</th>
<td>ら</td>
<td>り</td>
<td>る</td>
<td>れ</td>
<td>ろ</td>
</tr>
<tr>
<th>w</th>
<td>わ</td>
<td></td>
<td></td>
<td></td>
<td>を</td>
</tr>
<tr>
<th></th>
<td>ん</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table>
<tr>
<th></th>
<th>a</th>
<th>e</th>
<th>u</th>
<th>e</th>
<th>o</th>
</tr>
<tr>
<th>×</th>
<td>あ</td>
<td>い</td>
<td>う</td>
<td>え</td>
<td>お</td>
</tr>
<tr>
<th>k</th>
<td>か</td>
<td>き</td>
<td>く</td>
<td>け</td>
<td>こ</td>
</tr>
<tr>
<th>s</th>
<td>さ</td>
<td>し</td>
<td>す</td>
<td>せ</td>
<td>そ</td>
</tr>
<tr>
<th>t</th>
<td>た</td>
<td>ち</td>
<td>つ</td>
<td>て</td>
<td>と</td>
</tr>
<tr>
<th>n</th>
<td>な</td>
<td>に</td>
<td>ぬ</td>
<td>ね</td>
<td>の</td>
</tr>
<tr>
<th>h</th>
<td>は</td>
<td>ひ</td>
<td>ふ</td>
<td>へ</td>
<td>ほ</td>
</tr>
<tr>
<th>m</th>
<td>ま</td>
<td>み</td>
<td>む</td>
<td>め</td>
<td>も</td>
</tr>
<tr>
<th>y</th>
<td>や</td>
<td></td>
<td>ゆ</td>
<td></td>
<td>よ</td>
</tr>
<tr>
<th>r</th>
<td>ら</td>
<td>り</td>
<td>る</td>
<td>れ</td>
<td>ろ</td>
</tr>
<tr>
<th>w</th>
<td>わ</td>
<td></td>
<td></td>
<td></td>
<td>を</td>
</tr>
<tr>
<th></th>
<td>ん</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<footer>
<img src="https://via.placeholder.com/300" alt="">
</footer>
</div>
</section>
* {
/* outline: 1px solid red; */
margin: 0;
}
img {
max-width: 100%;
height: auto;
}
:root {
font-family: sans-serif;
}
section {
background-color: #f8b625;
padding: 1rem;
max-width: max-content;
margin: 0 auto;
}
header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
}
h1 {
font-size: clamp(1.5rem, 15vw, 4rem);
text-transform: uppercase;
color: #ffffff;
}
h2 {
font-size: clamp(1.15rem, 7vw, 1.5rem);
color: #ffffff;
}
.table-wrapper {
overflow-x: auto;
display: grid;
grid-row-gap: 1rem;
background-color: #e9eaea;
}
table {
border-spacing: 0.5rem;
}
th,
td {
text-align: center;
vertical-align: middle;
font-weight: 600;
}
tr:first-child th {
padding: 0.15rem 0.5rem;
}
tr th:first-child {
font-size: clamp(0.5rem, 5vw, 1rem);
padding: 0 0.5em;
}
td {
background-color: #ffffff;
font-size: clamp(0.5rem, 5vw, 1.5rem);
padding: 0 0.5em;
}
footer {
place-self: center;
}
@media (min-width: 768px) {
.table-wrapper {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment