Checkpoint: Fond oklch solide appliqué directement sur chaque th de l'en-tête du tableau Postes — le fond du tr était ignoré par les th, causant la transparence lors du scroll vertical

This commit is contained in:
Manus
2026-06-10 10:15:03 +00:00
parent ebf70ed3ad
commit cb01e3a04a

View File

@@ -1085,23 +1085,23 @@ export default function DsiOpex() {
<div className="bg-card border border-border rounded-xl" style={{ maxHeight: 'calc(100vh - 380px)', overflowY: 'auto', overflowX: 'auto' }}> <div className="bg-card border border-border rounded-xl" style={{ maxHeight: 'calc(100vh - 380px)', overflowY: 'auto', overflowX: 'auto' }}>
<table className="w-full text-sm"> <table className="w-full text-sm">
<thead> <thead>
<tr className="border-b border-border" style={{ position: 'sticky', top: 0, zIndex: 20, background: 'oklch(0.94 0.005 80)' }}> <tr className="border-b border-border" style={{ position: 'sticky', top: 0, zIndex: 20 }}>
<th className="text-left px-4 py-3 font-medium text-muted-foreground w-8">#</th> <th className="text-left px-4 py-3 font-medium text-muted-foreground w-8" style={{ background: 'oklch(0.94 0.005 80)' }}>#</th>
<th className="text-left px-4 py-3 font-medium text-muted-foreground"> <th className="text-left px-4 py-3 font-medium text-muted-foreground" style={{ background: 'oklch(0.94 0.005 80)' }}>
<SortBtn col="libelle" label="Poste de charge" /> <SortBtn col="libelle" label="Poste de charge" />
</th> </th>
<th className="text-left px-4 py-3 font-medium text-muted-foreground hidden md:table-cell">Catégorie</th> <th className="text-left px-4 py-3 font-medium text-muted-foreground hidden md:table-cell" style={{ background: 'oklch(0.94 0.005 80)' }}>Catégorie</th>
<th className="text-left px-4 py-3 font-medium text-muted-foreground hidden xl:table-cell">Facturation</th> <th className="text-left px-4 py-3 font-medium text-muted-foreground hidden xl:table-cell" style={{ background: 'oklch(0.94 0.005 80)' }}>Facturation</th>
<th className="text-left px-4 py-3 font-medium text-muted-foreground hidden xl:table-cell">Ventilation</th> <th className="text-left px-4 py-3 font-medium text-muted-foreground hidden xl:table-cell" style={{ background: 'oklch(0.94 0.005 80)' }}>Ventilation</th>
{showDetails && <th className="text-left px-3 py-3 font-medium text-muted-foreground hidden lg:table-cell w-20 max-w-[80px]">Type</th>} {showDetails && <th className="text-left px-3 py-3 font-medium text-muted-foreground hidden lg:table-cell w-20 max-w-[80px]" style={{ background: 'oklch(0.94 0.005 80)' }}>Type</th>}
{showDetails && <th className="text-left px-4 py-3 font-medium text-muted-foreground hidden xl:table-cell">Compte</th>} {showDetails && <th className="text-left px-4 py-3 font-medium text-muted-foreground hidden xl:table-cell" style={{ background: 'oklch(0.94 0.005 80)' }}>Compte</th>}
<th className="text-right px-4 py-3 font-medium text-muted-foreground">Budget N-1</th> <th className="text-right px-4 py-3 font-medium text-muted-foreground" style={{ background: 'oklch(0.94 0.005 80)' }}>Budget N-1</th>
<th className="text-right px-4 py-3 font-medium text-muted-foreground" style={{ minWidth: '140px' }}> <th className="text-right px-4 py-3 font-medium text-muted-foreground" style={{ minWidth: '140px', background: 'oklch(0.94 0.005 80)' }}>
<SortBtn col="montant" label={`Prév. ${annee}`} /> <SortBtn col="montant" label={`Prév. ${annee}`} />
</th> </th>
<th className="text-center px-3 py-3 font-medium text-muted-foreground w-24">Tendance</th> <th className="text-center px-3 py-3 font-medium text-muted-foreground w-24" style={{ background: 'oklch(0.94 0.005 80)' }}>Tendance</th>
<th className="text-right px-4 py-3 font-medium text-muted-foreground w-24">Répartition</th> <th className="text-right px-4 py-3 font-medium text-muted-foreground w-24" style={{ background: 'oklch(0.94 0.005 80)' }}>Répartition</th>
{!isValidated && <th className="px-4 py-3 w-20"></th>} {!isValidated && <th className="px-4 py-3 w-20" style={{ background: 'oklch(0.94 0.005 80)' }}></th>}
</tr> </tr>
</thead> </thead>
<tbody> <tbody>