居中排列粘滯列

Question

我正嘗試使用第一列粘滯表。粘性列中的內容總是處於頂部，可能是因爲位置是絕對的。 我該如何中間對齊粘滯列中的文本？

 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

你只是需要在stickycol CSS類添加一些CSS屬性。

對齊項：中心和顯示：彎曲是verically對準

證明內容和文本對齊是爲水平對齊。

查看片段。

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>