Middle align a sticky column - html

Question

I´m trying to have a table with a sticky first column. The content in the sticky column is always in top of the probably because position is absolute.
How can I middle align the text in the sticky column?
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

You need to just add few css properties in the stickycol css class.
align-items:center and display:flex are for verically align
justify-content and text-align are for horizontally align.
see the 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>