CSS note

HTML

<table>
<caption tabindex="0">もっと表示する</caption>
<tr><td>hello</td><td>world</td></tr>
<tr><td>hello</td><td>world</td></tr>
<tr><td>hello</td><td>world</td></tr>
<tr><td>hello</td><td>world</td></tr>
<tr><td>hello</td><td>world</td></tr>
<tr><td>hello</td><td>world</td></tr>
<tr><td>hello</td><td>world</td></tr>
<tr><td>hello</td><td>world</td></tr>
</table>

CSS

tr{
 display:none;
 visibility:collapse;
}
tr:nth-child(3), tr:nth-child(2), tr:nth-child(1){
 display:table-row;
 visibility:visible;
}
caption:focus ~ tr, table:focus-within tr{
 visibility:visible;
 display:table-row;
}
caption{
 caption-side: bottom;
}
table{
	/* IE Edgeでは、動きません */
     -ms-overflow-style: -ms-autohiding-scrollbar;
}

Photo by Roberta Sorge on Unsplash

新着記事