<p class="message">Use "<a href="https://caniuse.com/mdn-css_properties_animation-timeline_scroll" target="_blank" rel="noopener noreferrer">CSS property: animation-timeline: scroll()</a>". <span hidden class="supports">Your browser already supports this CSS property.</span> <span hidden class="not-supports">Your browser does not yet supports this CSS property.</span></p>
<div class="__table__diagonal-line">
<table style="--table-layout: fixed;">
<caption>Caption</caption>
<colgroup>
<col />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th></th>
<th scope="col">A</th>
<th scope="col">B</th>
<th scope="col">C</th>
<th scope="col">D</th>
<th scope="col">E</th>
<th scope="col">F</th>
<th scope="col">G</th>
<th scope="col">H</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
<td>E1</td>
<td>F1</td>
<td>G1</td>
<td>H1</td>
</tr>
<tr>
<th scope="row">2</th>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td>D2</td>
<td>E2</td>
<td>F2</td>
<td>G2</td>
<td>H2</td>
</tr>
<tr>
<th scope="row">3</th>
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
<td>E3</td>
<td>F3</td>
<td>G3</td>
<td>H3</td>
</tr>
<tr>
<th scope="row">4</th>
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
<td>E4</td>
<td>F4</td>
<td>G4</td>
<td>H4</td>
</tr>
<tr>
<th scope="row">5</th>
<td>A5</td>
<td>B5</td>
<td>C5</td>
<td>D5</td>
<td>E5</td>
<td>F5</td>
<td>G5</td>
<td>H5</td>
</tr>
<tr>
<th scope="row">6</th>
<td>A6</td>
<td>B6</td>
<td>C6</td>
<td>D6</td>
<td>E6</td>
<td>F6</td>
<td>G6</td>
<td>H6</td>
</tr>
<tr>
<th scope="row">7</th>
<td>A7</td>
<td>B7</td>
<td>C7</td>
<td>D7</td>
<td>E7</td>
<td>F7</td>
<td>G7</td>
<td>H7</td>
</tr>
<tr>
<th scope="row">8</th>
<td>A8</td>
<td>B8</td>
<td>C8</td>
<td>D8</td>
<td>E8</td>
<td>F8</td>
<td>G8</td>
<td>H8</td>
</tr>
</tbody>
</table>
</div>* {
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
html {
--black: #000;
--white: #fff;
--borw: var(--black);
--worb: var(--white);
background: var(--worb);
color: var(--borw);
@media (prefers-color-scheme: dark) {
--borw: var(--white);
--worb: var(--black);
}
}
body {
margin-block: 0;
margin-inline: auto;
max-inline-size: 50rem;
padding: 1rem;
}
@supports (animation-timeline: scroll(block self)) {
.message .supports {
color: green;
content-visibility: visible;
display: inline;
}
}
@supports not (animation-timeline: scroll(block self)) {
.message .not-supports {
color: red;
content-visibility: visible;
display: inline;
}
}
@keyframes block-scroll-hint {
0% {
--before_clip-path: polygon(
50% 90%,
10% 50%,
30% 50%,
30% 10%,
70% 10%,
70% 50%,
90% 50%
);
--before_inset-block: auto 0;
--before_place-self: end auto;
}
25%,
75% {
--before_clip-path: polygon(
50% 50%,
50% 50%,
50% 50%,
50% 50%,
50% 50%,
50% 50%,
50% 50%
);
}
100% {
--before_clip-path: polygon(
50% 10%,
90% 50%,
70% 50%,
70% 90%,
30% 90%,
30% 50%,
10% 50%
);
--before_inset-block: 0 auto;
--before_place-self: start auto;
}
}
@keyframes inline-scroll-hint {
0% {
--after_clip-path: polygon(
90% 50%,
50% 90%,
50% 70%,
10% 70%,
10% 30%,
50% 30%,
50% 10%
);
--after_inset-inline: auto 0;
--after_place-self: auto end;
}
25%,
75% {
--after_clip-path: polygon(
50% 50%,
50% 50%,
50% 50%,
50% 50%,
50% 50%,
50% 50%,
50% 50%
);
}
100% {
--after_clip-path: polygon(
10% 50%,
50% 10%,
50% 30%,
90% 30%,
90% 70%,
50% 70%,
50% 90%
);
--after_inset-inline: 0 auto;
--after_place-self: auto start;
}
}
[class*="__table__"] {
& {
--before_clip-path: inset(50%);
--before_inset-block: auto 0;
--before_place-self: end auto;
--after_clip-path: inset(50%);
--after_inset-inline: auto 0;
--after_place-self: auto end;
--border-style: solid;
--border-width: 1px;
--border-color: color-mix(in srgb, var(--worb), var(--borw) 20%);
--padding: 0.5rem;
animation: block-scroll-hint, inline-scroll-hint;
animation-timeline: scroll(block self), scroll(inline self);
border: var(--border-style) var(--border-width) var(--border-color);
border-radius: 2px;
display: grid;
grid: auto / 100% auto;
margin: 0;
max-block-size: 75dvb;
max-inline-size: 100%;
overflow: auto;
resize: both;
}
&::before,
&::after {
background: currentcolor;
block-size: 2rem;
content: "";
inline-size: 2rem;
overflow: hidden;
position: sticky;
transition: clip-path 0.25s;
z-index: 1;
}
&::before {
clip-path: var(--before_clip-path);
grid-area: 1 / 1 / -1 / 2;
place-self: var(--before_place-self);
inset-block: var(--before_inset-block);
inset-inline: calc(50% - 1rem);
}
&::after {
clip-path: var(--after_clip-path);
grid-area: 1 / 1 / -1 / -1;
place-self: var(--after_place-self);
inset-block: calc(50% - 1rem);
inset-inline: var(--after_inset-inline);
}
&:dir(rtl)::after {
rotate: y 180deg;
}
& > table {
--table-layout: auto;
border: hidden;
border-collapse: collapse;
grid-area: 1 / 1 / -1 / -1;
inline-size: 60rem;
min-inline-size: 100%;
table-layout: var(--table-layout);
}
& > table > caption {
border-block-end: var(--border-style) var(--border-width)
var(--border-color);
padding: var(--padding);
text-align: inherit;
}
& > table > * > tr > * {
border: var(--border-style) var(--border-width) var(--border-color);
padding: var(--padding);
text-align: inherit;
}
}
.__table__diagonal-line > table > * > tr > :empty {
background-image: linear-gradient(
to left bottom,
transparent calc(50% - 0.75px),
var(--border-color) calc(50% - 0.25px) calc(50% + 0.25px),
transparent calc(50% + 0.75px)
);
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.