Benötigen Sie eine feste und scrollbare Spalten in einer Tabelle mit jQuery

Question

Wie mache ich meine erste Spalte als feste Coulmn in jQuery. Ich möchte keine Plugins außer jquery Plugin verwenden.

Betrachten Sie bitte js Geige,

fiddle

Hier zwei Tabellen gibt es, nur ich will innerhalb einer Tabelle.

th,td { 
 
    padding: 5px; 
 
    border: 1px solid #000; 
 
    white-space: nowrap; 
 
} 
 

 
.table1 { 
 
    float: left; 
 
}   
 
.table2 { 
 
    width: 200px; 
 
    overflow: auto; 
 
}

<div style="width:400px">  
 
    <table class="table1"> 
 
     <tr> 
 
      <thead> 
 
       <th> make me fixed</th> 
 
      </thead> 
 
     </tr> 
 
     <tr> 
 
      <td>value number 1</td>  
 
     </tr>  
 
    </table>  
 

 
    <div class="table2"> 
 
     <table> 
 
      <tr> 
 
       <thead> 
 
        <th>make me scrollable eeeeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeee eeeeeeeeeeeeeeeeee eeeeeeee eeeeeeeeeee eeeeeeeeeeeeee eeeeeeeeee eeeeeeee</th> 
 
       </thead> 
 
      </tr> 
 
      <tr> 
 
       <td> value number 2 </td>   
 
      </tr>  
 
     </table>  
 
    </div> 
 
</div>

Bitte helfen Sie mir, wie ich das in einem eine Tabelle mit fester Säule und vertikalen und horizontalen Scroll erreichen können.

Answer 1

Werfen Sie einen Blick auf diese:

th, 
 
td { 
 
    padding: 5px; 
 
    border: 1px solid #000; 
 
    white-space: nowrap; 
 
} 
 
.table1 { 
 
    float: left; 
 
    width: 100%; 
 
    table-layout: fixed; 
 
} 
 
.table2 { 
 
    width: 200px; 
 
    overflow: auto; 
 
}

<div style="width:400px"> 
 

 
    <table class="table1"> 
 
    <tr> 
 
     <thead> 
 
     <th>make me fixed</th> 
 
     <th class="table2">make me scrollable eeeeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeee eeeeeeeeeeeeeeeeee eeeeeeee eeeeeeeeeee eeeeeeeeeeeeee eeeeeeeeee eeeeeeee</th> 
 
     </thead> 
 
    </tr> 
 
    <tr> 
 
     <td>value number 1</td> 
 
     <td class="table2">value number 2</td> 
 
    </tr> 
 
    </table> 
 

 
</div>

Es verwendet Tabellenlayout festgelegt, sowie die Breite für die Tabelle zu setzen.

Answer 2

Wenn die erste Spaltenbreite festgelegt werden kann, können Sie etwas tun:

body { 
 
    font-family: sans-serif; 
 
} 
 
.table div { 
 
    overflow: auto; 
 
    border-left: 1px solid black; 
 
} 
 
table { 
 
    width: 800px; 
 
    border-collapse: collapse; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    border-left-width: 0; 
 
} 
 
.table { 
 
    position: relative; 
 
} 
 
.table:after { 
 
    width: 150px; 
 
    display: block; 
 
    height: 100%; 
 
    position: absolute; 
 
    background: #eee; 
 
    content: ''; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: -1; 
 
    border-right: 1px solid black 
 
} 
 
#head { 
 
    width: 150px; 
 
} 
 
td, th { 
 
    padding: 0; 
 
    vertical-align: top; 
 
    padding: 5px; 
 
    text-align: left; 
 
} 
 
th { 
 
    position: absolute; 
 
    width: 140px; 
 
} 
 
td { 
 
    position: relative; 
 
    z-index: -2; 
 
} 
 
tr { 
 
    border-top: 1px solid black; 
 
}

<div class="table"> 
 
    <div> 
 
     <table> 
 
      <col id="head" /> 
 
      <tr> 
 
       <th>make me fixed fhfghghgfhggf</th> 
 
       <td>make me scrollable eeeeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeee eeeeeeeeeeeeeeeeee eeeeeeee eeeeeeeeeee eeeeeeeeeeeeee eeeeeeeeee eeeeeeee</td> 
 
      </tr> 
 
      <tr> 
 
       <th>value number 1</th> 
 
       <td>value number 2</td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
</div> 
 

 
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

Nachteile:

• Text in th Zellen können nur ausgerichtet werden oben.
• Die Zellen td sollten höher oder gleich hoch wie die Zellen th sein.
• Benötigt zusätzliche divs