0
我正嘗試使用第一列粘滯表。粘性列中的內容總是處於頂部,可能是因爲位置是絕對的。 我該如何中間對齊粘滯列中的文本?居中排列粘滯列
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>
感謝帕萬·庫馬爾:) –