Mitte eine klebrige Spalte ausrichten

Question

Ich versuche, eine Tabelle mit einer klebrigen ersten Spalte zu haben. Der Inhalt in der klebrigen Spalte ist immer oben, wahrscheinlich weil die Position absolut ist. Wie kann ich den Text in der Sticky-Spalte ausrichten?

 table { 
 
      border-collapse: separate; 
 
      border-top: 3px solid grey; 
 
     } 
 
     
 
     td, 
 
     th { 
 
      margin: 0; 
 
      border: 3px solid grey; 
 
      border-top-width: 0px; 
 
      height: 30px; 
 
     } 
 
     
 
     div { 
 
      width: 600px; 
 
      overflow-x: scroll; 
 
      margin-left: 70px; 
 
      overflow-y: visible; 
 
      padding-bottom: 1px; 
 
     } 
 
     
 
     .stickycol { 
 
      line-height: 13px; 
 
      position: absolute; 
 
      width: 70px; 
 
      left: 0; 
 
      top: auto; 
 
      border-right: 0px none black; 
 
      border-top-width: 3px; 
 
      /*only relevant for first row*/ 
 
      margin-top: -3px; 
 
      /*compensate for top border*/ 
 
      
 
      
 
      word-wrap: break-word; 
 
      white-space: -moz-pre-wrap !important; 
 
      /* Mozilla, since 1999 */ 
 
      white-space: -pre-wrap; 
 
      /* Opera 4-6 */ 
 
      white-space: -o-pre-wrap; 
 
      /* Opera 7 */ 
 
      white-space: pre-wrap; 
 
      /* css-3 */ 
 
      word-wrap: break-word; 
 
      /* Internet Explorer 5.5+ */ 
 
      white-space: -webkit-pre-wrap; 
 
      /* Newer versions of Chrome/Safari*/ 
 
      word-break: break-all; 
 
      white-space: normal; 
 
     } 
 
     
 
     .long { 
 
      letter-spacing: 1em; 
 
     }

<div> 
 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <th class="stickycol">col1</th> 
 
     <th>col2</th> 
 
     <th>col3</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td class="stickycol">This text is so long</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="stickycol">2</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="stickycol">3</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="stickycol">4</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="stickycol">5</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="stickycol">6</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="stickycol">7</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="stickycol">8</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="stickycol">9</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Answer 1

Sie brauchen nur wenige CSS-Eigenschaften in der stickycol CSS-Klasse hinzufügen.

align-Elemente: center und Display: flex sind für verically ausrichten

rechtfertigen-Inhalt und text-align sind für horizontal auszurichten.

siehe das Snippet.

table { 
 
      border-collapse: separate; 
 
      border-top: 3px solid grey; 
 
     } 
 
     
 
     td, 
 
     th { 
 
      margin: 0; 
 
      border: 3px solid grey; 
 
      border-top-width: 0px; 
 
      height: 30px; 
 
     } 
 
     
 
     div { 
 
      width: 600px; 
 
      overflow-x: scroll; 
 
      margin-left: 70px; 
 
      overflow-y: visible; 
 
      padding-bottom: 1px; 
 
     } 
 
     
 
     .stickycol { 
 
     text-align:center; 
 
     justify-content:center; 
 
     align-items:center; 
 
     display:flex; 
 
      line-height: 13px; 
 
      position: absolute; 
 
      width: 70px; 
 
      left: 0; 
 
      top: auto; 
 
      border-right: 0px none black; 
 
      border-top-width: 3px; 
 
      /*only relevant for first row*/ 
 
      margin-top: -3px; 
 
      /*compensate for top border*/ 
 
      
 
      
 
      word-wrap: break-word; 
 
      white-space: -moz-pre-wrap !important; 
 
      /* Mozilla, since 1999 */ 
 
      white-space: -pre-wrap; 
 
      /* Opera 4-6 */ 
 
      white-space: -o-pre-wrap; 
 
      /* Opera 7 */ 
 
      white-space: pre-wrap; 
 
      /* css-3 */ 
 
      word-wrap: break-word; 
 
      /* Internet Explorer 5.5+ */ 
 
      white-space: -webkit-pre-wrap; 
 
      /* Newer versions of Chrome/Safari*/ 
 
      word-break: break-all; 
 
      white-space: normal; 
 
     } 
 
     
 
     .long { 
 
      letter-spacing: 1em; 
 
     }

<div> 
 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <th class="stickycol">col1</th> 
 
     <th>col2</th> 
 
     <th>col3</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td class="stickycol">This text is so long</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="stickycol">2</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="stickycol">3</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="stickycol">4</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="stickycol">5</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="stickycol">6</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="stickycol">7</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="stickycol">8</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="stickycol">9</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>