Ich habe eine Tabelle mit Sticky-Headern und Sticky-TDS mit Zeilenspannen darin. Beim Scrollen erscheinen td und rowspan oben in der Kopfzeile (die in diesem Beispiel die erste Spalte ist). Durch die Angabe eines Z-Index wird die Kopfzeile über dem TD platziert, überlappt jedoch dessen Text. Wie kann ich das verhindern? Meine erste Version hatte keine Zeilenspannen, enthielt leere Zellen und verhielt sich korrekt.
* { padding: 0; margin: 0; box-sizing: border-box; } /* .wrapper { overflow: auto; height: 20rem; } */ table { display: block; overflow: auto; height: 20rem; border-collapse: separate; border-spacing: 0; } thead { position: sticky; top: 0; background-color: #333; color: #fff; /* z-index: 100; */ } thead th { border: 0.1rem solid #ddd; } tbody tr:nth-child(even) { background-color: #ddd; } tbody td { padding: 0 0.5rem; } tbody td[rowspan] { border-top: 0.1rem solid #999; vertical-align: top; position: sticky; top: 1.4rem; background-color: #fff; /* z-index: 10; */ }
<!-- <div class="wrapper"> --> <table> <thead> <tr> <th>col1</th> <th>col2</th> <th>col3</th> <th>col4</th> <th>col5</th> </tr> </thead> <tbody> <tr> <td rowspan="10">cell_text_1</td> <td rowspan="4">cell_text</td> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="4">cell_text</td> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="2">cell_text</td> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="10">cell_text_2</td> <td rowspan="5">cell_text</td> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="5">cell_text</td> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="18">cell_text_3</td> <td rowspan="6">cell_text</td> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="7">cell_text</td> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="5">cell_text</td> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="12">cell_text_4</td> <td rowspan="6">cell_text</td> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="6">cell_text</td> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> <tr> <td rowspan="">cell_text</td> <td>cell_text</td> <td>cell_text</td> </tr> </tbody> </table> <!-- </div> -->
尝试下面,行距错误