Tabelle mit td fixiert, vertikale und horizontale Scroll-

ich eine Tabelle festgelegt mit einem td haben, hat die Tabelle vertikale und horizontale Scroll:Tabelle mit td fixiert, vertikale und horizontale Scroll-

.div1{ 
 
    width: 100%; 
 
    max-width:100%; 
 
} 
 

 
.div2{ 
 
    max-width: 200px; 
 
    overflow-x:auto; 
 
} 
 

 
.tableStyle{ 
 
    width: auto; 
 
    max-width: 0px; 
 
    overflow-x:auto; 
 
} 
 

 
.tbodyClass{ 
 
\t max-height: 80px; 
 
    overflow-y: auto; 
 
/* position:absolute;*/ 
 
} 
 

 
.move{ 
 
    width:70px; 
 
    min-width: 70px; 
 
} 
 

 
.fixed{ 
 

 
    width:100px; 
 
    position:absolute; 
 
    border-bottom:0px; 
 
}

<div class="div1"> 
 
\t <div class="div2"> 
 
    <table class="tableStyle"> 
 
     <thead> 
 
      <th class="move"> C1 </th> 
 
      <th class="move"> C2 </th> 
 
      <th class="move"> C3 </th> \t \t \t \t 
 
      <th class="fixed">C4</th> 
 
     </thead> 
 
     <tbody class="tbodyClass"> 
 
      <tr> 
 
      <td class="move">1 column1 </td> 
 
      <td class="move">1 column2 </td> 
 
      <td class="move">1 column3 </td> 
 
      <td class="fixed">1 columnFix </td> 
 
      </tr> 
 
      <tr> 
 
      <td class="move">2 column1 </td> 
 
      <td class="move">2 column2 </td> 
 
      <td class="move">2 column3 </td> 
 
      <td class="fixed">2 columnFix </td> 
 
      </tr> 
 
      <tr> 
 
      <td class="move">3 column1 </td> 
 
      <td class="move">3 column2 </td> 
 
      <td class="move">3 column3 </td> 
 
      <td class="fixed">3 columnFix </td> 
 
      </tr> 
 
      <tr> 
 
      <td class="move">4 column1 </td> 
 
      <td class="move">4 column2 </td> 
 
      <td class="move">4 column3 </td> 
 
      <td class="fixed">4 columnFix </td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</div> 
 
</div>

Mit diesem Code werden die horizontalen Rollen Werke Gut, wenn ich versuche vertikale Scroll hinzuzufügen (Kommentar/* Position: absolut; * /), hat es die feste Spalte verloren.

Wie kann ich es beheben?

Quelle

2017-03-15 cucuru

prüfen diese http://stackoverflow.com/questions/3402295/html-table-with-horizontal-scrolling-first-column-fixed –

Sie don‘ Ich habe genug Inhalt, um eine vertikale Bildrolle zu benötigen, es sei denn, Sie reduzieren die Höhe Ihres 'tbody'. Warum denkst du auch, dass das Setzen von "position: absolute" eine vertikale Bildlaufleiste erzeugen würde? Das bricht deine feste Säule, wie du es gesehen hast. – Slime

Ich versuchte die Höhe: 8px in .tbodyClass und ich sehe nicht vertikale Scroll. Wie kann ich die Spalte reparieren, wenn sie nicht mit der Position: abolute? – cucuru

überprüfen Sie dies, bin das Hinzufügen des Stils max-height:120px; zum div2. Bitte versuchen Sie den Code unten

.div1{ 
 
    width: 100%; 
 
    max-width:100%; 
 
} 
 

 
.div2{ 
 
    max-width: 200px; 
 
    overflow-x:auto; 
 
    max-height : 120px; 
 

 
} 
 

 
.tableStyle{ 
 
    width: auto; 
 
    max-width: 0px; 
 
    overflow-x:auto; 
 
} 
 

 
.tbodyClass{ 
 
\t max-height: 80px; 
 
    overflow-y: auto; 
 
/* position:absolute;*/ 
 
} 
 

 
.move{ 
 
    width:70px; 
 
    min-width: 70px; 
 
} 
 

 
.fixed{ 
 

 
    width:100px; 
 
    position:absolute; 
 
    border-bottom:0px; 
 
}

<div class="div1"> 
 
\t <div class="div2"> 
 
    <table class="tableStyle"> 
 
     <thead> 
 
      <th class="move"> C1 </th> 
 
      <th class="move"> C2 </th> 
 
      <th class="move"> C3 </th> \t \t \t \t 
 
      <th class="fixed">C4</th> 
 
     </thead> 
 
     <tbody class="tbodyClass"> 
 
      <tr> 
 
      <td class="move">1 column1 </td> 
 
      <td class="move">1 column2 </td> 
 
      <td class="move">1 column3 </td> 
 
      <td class="fixed">1 columnFix </td> 
 
      </tr> 
 
      <tr> 
 
      <td class="move">2 column1 </td> 
 
      <td class="move">2 column2 </td> 
 
      <td class="move">2 column3 </td> 
 
      <td class="fixed">2 columnFix </td> 
 
      </tr> 
 
      <tr> 
 
      <td class="move">3 column1 </td> 
 
      <td class="move">3 column2 </td> 
 
      <td class="move">3 column3 </td> 
 
      <td class="fixed">3 columnFix </td> 
 
      </tr> 
 
      <tr> 
 
      <td class="move">4 column1 </td> 
 
      <td class="move">4 column2 </td> 
 
      <td class="move">4 column3 </td> 
 
      <td class="fixed">4 columnFix </td> 
 
      </tr> 
 
      <tr> 
 
      <td class="move">5 column1 </td> 
 
      <td class="move">5 column2 </td> 
 
      <td class="move">5 column3 </td> 
 
      <td class="fixed">5 columnFix </td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</div> 
 
</div>

Quelle

2017-03-15 13:31:55 vijay

danke, das ist nicht vertikal C4 mit dem Rest der Tabelle zu bewegen – cucuru

Tabelle mit td fixiert, vertikale und horizontale Scroll-

Antwort

Verwandte Themen