Tableau responsive sticky position avec ombrage au scroll (CSS scroll state)

• container
• @container
• scroll-state
• sticky
• table
• box-shadow

Votre navigateur ne supporte pas cette démonstration

<figure>
<figcaption>
<h2>Titre</h2> 
</figcaption>
<div class="table" tabindex="0">


   
<table>
<tbody>
<tr> 	 		  	  	
<th>Classement</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
   
<tr>
<th>Continent</th>
<td>Amérique du nord</td> 
<td>Asie</td>  
<td>Asie</td>
<td>Europe</td> 
<td>Asie</td>
<td>Europe</td>  
<td>Europe</td> 
<td>Europe</td>  
<td>Amérique du nord</td>
<td>Asie</td>
</tr>
		  
<tr> 
<th>Pays</th>
<td>États-Unis</td>
<td>Chine</td>
<td>Japon</td>
<td>Allemagne</td>
<td>Inde</td>
<td>Royaume-Uni</td>
<td>France</td>
<td>Italie</td>
<td>Canada</td>
<td>République de Corée / Corée du Sud</td>
</tr>
		  
<tr>
<th>Année la plus récente</th>
<td>2021</td>
<td>2021</td>
<td>2021</td>
<td>2021</td>
<td>2021</td>
<td>2021</td>
<td>2021</td>
<td>2021</td>
<td>2021</td>
<td>2021</td>
</tr>
		  
<tr>
<th>Produit intérieur brut (PIB)</th>
<td>23315.08 milliards $US </td>
<td>17734.06 milliards $US </td>
<td>4940.88 milliards $US </td>
<td>4259.93 milliards $US </td>
<td>3176.3 milliards $US </td>
<td>3131.38 milliards $US </td>
<td>2957.88 milliards $US </td>
<td>2107.7 milliards $US  </td>
<td>1988.34 milliards $US </td>
<td>1810.96 milliards $US </td>
</tr>

<tr>
<th>Variation avec année précédente</th>
<td>⬆️2254.61 milliards $US</td>
<td>⬆️3046.39 milliards $US</td>
<td>⬆️99.23 milliards $US </td>
<td>⬆️370.27 milliards $US </td>
<td>⬆️508.61 milliards $US </td>
<td>⬆️426.77 milliards $US </td>
<td>⬆️318.87 milliards $US </td>
<td>⬆️210.95 milliards $US </td>
<td>⬆️342.91 milliards $US </td>
<td>⬆️166.64 milliards $US </td>
</tr>
		  


</tbody>
</table>
</div>
</figure>
	

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
 container-type: inline-size;
}

body{
display:grid;
min-height:100dvh;
place-content: center;
font-family: system-ui;
--scrollbar: calc(100vw - 100cqw);/*pour récupérer la longueur de la barre de scroll https://css-tip.com/width-scrollbar/*/}

@property --scrollbar {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px; 
} 
  
    
figure {
width: 100%;
max-width:800px;
margin: 0 auto;
display: grid
}
    
@property --ombrage-opacite-gauche {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
  }

@property --ombrage-opacite-droite {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
  }
      
    
    
.table {
font-size:1rem;
overflow: auto;
height:400px;
display:grid;
border: 1px solid rgba(0, 0, 0, 0.2);
container-type: scroll-state size;
&::after{	
content: " ";
grid-area:1/1;
position: sticky;
top: 0;
left:30cqw;
height:100cqh;
width:calc(70cqw - var(--scrollbar));/*pour récupérer la longueur de la barre de scroll https://css-tip.com/width-scrollbar/*/
pointer-events: none;
--ombrage-gauche:linear-gradient(to right,oklch(10% 0 0 / var(--ombrage-opacite-gauche)), #0000 20px);
--ombrage-droite:linear-gradient(to left,oklch(10% 0 0 / var(--ombrage-opacite-droite)), #0000 20px);
background: var(--ombrage-gauche), var(--ombrage-droite);

@media (prefers-reduced-motion: no-preference) {
        
transition: --ombrage-opacite-gauche .5s ease,--ombrage-opacite-droite .5s ease; 
        
   }

@container scroll-state(scrollable: left) {
    
 --ombrage-opacite-gauche: var(--opacite-ombrage, 25%);
}
      
@container scroll-state(scrollable: right) {
    
--ombrage-opacite-droite: var(--opacite-ombrage, 25%);
    
 }    
  
@media (prefers-color-scheme: dark) {
    
 --opacite-ombrage: 90%;
      }
      
      
    }
    
table {  
text-align: left; 
border-spacing: 0;
margin-top:-100cqh;
}
    
th {
    
font-weight: bold;
position: sticky;
left: 0;
min-width:30cqw;
background-color:white;
border: 1px solid rgba(0, 0, 0, 0.2);
    
}
	
tr > * {
  padding: 0.75rem 1rem; 
}

tr > *:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.12);
}



tr > * {
 border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}
    }