The table's layout becomes distorted after refreshing the page, but functions normally when the size of the window is adjusted.
Even after testing the code in Chrome, IE, and Edge, I did not encounter any issues like this.
Here is the SASS snippet responsible for styling the table:
.cv-table {
border-collapse: separate;
border-spacing: 0 $line-spacing;
}
.cv-section-cell {
text-align: center;
vertical-align: middle;
border-right: thin solid #000;
padding: $line-spacing / 2;
margin: 0;
span {
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
transform: rotate(180deg);
white-space: nowrap;
}
}
Below is an example of how the table is structured:
<table class="cv-table">
<tr>
<td rowspan="2" class="cv-section-cell">
<span>
Experience
</span>
</td>
<td class="cv-section-cell">
<span>
2016/2017
</span>
</td>
<td class="cv-content-cell">
Some other text.
</td>
</tr>
<tr>
<td class="cv-section-cell">
<span>
2017/2018
</span>
</td>
<td class="cv-content-cell">
Some text.
</td>
</tr>
</table>
This demonstrates how the page appears before being reloaded:
And here is how it looks afterwards: