中间对齐粘性列

时间：2017-06-06 14:53:05

标签： html css

我正在尝试使用粘性第一列的表格。粘性列中的内容始终位于可能的顶部，因为位置是绝对的。 如何在粘性列中间对齐文本？

        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>

1 个答案:

答案 0 :(得分：1)

你需要在stickycol css类中添加几个css属性。

align-items：center 和 display：flex 用于真正对齐

justify-content 和 text-align 用于水平对齐。

请参阅代码段。

＆＃13;
＆＃13; 
   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;
        }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题