Maison > Questions et réponses > le corps du texte
J'ai un tableau avec un en-tête fixe et une première colonne fixe. Je souhaite également faire pivoter les en-têtes de colonnes de 45 degrés.
Le titre fixe doit définir la couleur d’arrière-plan. Cependant, cela pose des problèmes avec les titres pivotés à 45 degrés, car l'arrière-plan de la colonne suivante chevauche le texte de la colonne précédente. Voici des exemples de questions :
.fixed_table { white-space: nowrap; margin: 0; border: none; border-collapse: separate; border-spacing: 0; table-layout: fixed; } .fixed_table td, .fixed_table th { padding: 5px; } .fixed_table thead th { padding: 5px; position: sticky; top: 0; z-index: 1; width: 25vw; background: #F8F9FA; } .fixed_table td { background: #F8F9FA; padding: 5px; text-align: center; border: 1px solid #ccc; } .fixed_table tbody th { text-align: left; position: relative; } .fixed_table thead th:first-child { position: sticky; left: 0; z-index: 2; } .fixed_table tbody th { position: sticky; left: 0; background: #F8F9FA; z-index: 1; } th.rotate { /* Something you can count on */ height: 140px; white-space: nowrap; } th.rotate > div { transform: /* Magic Numbers */ translate(25px, 51px) /* 45 is really 360 - 45 */ rotate(315deg); width: 30px; } th.rotate > div > span { border-bottom: 1px solid #ccc; padding: 5px 10px; }
<div style="height: 100%; width: 100%; overflow-y: scroll; background-color: #F8F9FA; height: 400px;"> <table class="fixed_table"> <thead> <tr> <th></th> <th class="rotate"><div><span>Activity 1</span></div></th> <th class="rotate"><div><span>Activity 2</span></div></span></div></th> <th class="rotate"><div><span>Activity 3</span></div></th> <th class="rotate"><div><span>Activity 4</span></div></th> <th class="rotate"><div><span>Activity 5</span></div></th> <th class="rotate"><div><span>Activity 6</span></div></th> <th class="rotate"><div><span>Activity 7</span></div></th> <th class="rotate"><div><span>Activity 8</span></div></th> <th class="rotate"><div><span>Activity 9</span></div></th> <th class="rotate"><div><span>Activity 10</span></div></th> </tr> </thead> <tbody> <tr> <th>Employee 1</th> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <tr/> <tr> <th>Employee 2</th> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <tr/> <tr> <th>Employee 3</th> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <tr/> <tr> <th>Employee 4</th> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <tr/> <tr> <th>Employee 5</th> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <tr/> <tr> <th>Employee 6</th> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <tr/> <tr> <th>Employee 7</th> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <tr/> <tr> <th>Employee 8</th> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <tr/> <tr> <th>Employee 9</th> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <tr/> <tr> <th>Employee 10</th> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <tr/> <tr> <th>Employee 11</th> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <tr/> <tr> <th>Employee 12</th> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <tr/> <tr> <th>Employee 13</th> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <tr/> <tr> <th>Employee 14</th> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <tr/> <tr> <th>Employee 15</th> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <tr/> </tbody> </table> </div>
Si je ne définis pas la couleur d'arrière-plan, les lignes défilent avec les en-têtes de colonnes :
.fixed_table { white-space: nowrap; margin: 0; border: none; border-collapse: separate; border-spacing: 0; table-layout: fixed; } .fixed_table td, .fixed_table th { padding: 5px; } .fixed_table thead th { padding: 5px; position: sticky; top: 0; z-index: 1; width: 25vw; background: transparent; } .fixed_table td { background: #F8F9FA; padding: 5px; text-align: center; border: 1px solid #ccc; } .fixed_table tbody th { text-align: left; position: relative; } .fixed_table thead th:first-child { position: sticky; left: 0; z-index: 2; } .fixed_table tbody th { position: sticky; left: 0; background: #F8F9FA; z-index: 1; } th.rotate { /* Something you can count on */ height: 140px; white-space: nowrap; } th.rotate > div { transform: /* Magic Numbers */ translate(25px, 51px) /* 45 is really 360 - 45 */ rotate(315deg); width: 30px; } th.rotate > div > span { border-bottom: 1px solid #ccc; padding: 5px 10px; }
<div style="height: 100%; width: 100%; overflow-y: scroll; background-color: #F8F9FA; height: 400px;"> <table class="fixed_table"> <thead> <tr> <th></th> <th class="rotate"><div><span>Activity 1</span></div></th> <th class="rotate"><div><span>Activity 2</span></div></span></div></th> <th class="rotate"><div><span>Activity 3</span></div></th> <th class="rotate"><div><span>Activity 4</span></div></th> <th class="rotate"><div><span>Activity 5</span></div></th> <th class="rotate"><div><span>Activity 6</span></div></th> <th class="rotate"><div><span>Activity 7</span></div></th> <th class="rotate"><div><span>Activity 8</span></div></th> <th class="rotate"><div><span>Activity 9</span></div></th> <th class="rotate"><div><span>Activity 10</span></div></th> </tr> </thead> <tbody> <tr> <th>Employee 1</th> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <tr/> <tr> <th>Employee 2</th> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <tr/> <tr> <th>Employee 3</th> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <tr/> <tr> <th>Employee 4</th> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <tr/> <tr> <th>Employee 5</th> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <tr/> <tr> <th>Employee 6</th> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <tr/> <tr> <th>Employee 7</th> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <tr/> <tr> <th>Employee 8</th> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <tr/> <tr> <th>Employee 9</th> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <tr/> <tr> <th>Employee 10</th> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <tr/> <tr> <th>Employee 11</th> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <tr/> <tr> <th>Employee 12</th> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <tr/> <tr> <th>Employee 13</th> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <tr/> <tr> <th>Employee 14</th> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <tr/> <tr> <th>Employee 15</th> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <tr/> </tbody> </table> </div>
Quelqu'un a-t-il une solution pour (a) garder l'en-tête fixe et ne pas afficher les lignes de données qui défilent derrière lui, et (b) faire en sorte que tous les en-têtes pivotés à 45 degrés s'affichent toujours correctement ?
Merci d'avance !
P粉6628028822024-04-04 00:16:29
Essayez le code suivant :
.fixed_table thead th { padding: 5px; position: sticky; top: 0; z-index: 1; background-color: white; width: 25vw; /* background: transparent; */ }
J'espère que cela vous aidera.