<style>
body { overflow: hidden; }
table { border-collapse: collapse; }
td { width: 25px; height: 25px; }
</style>
<div style="-webkit-writing-mode: vertical-rl; height: 200px; border: solid;">
<table>
<colgroup span="2"><colgroup span="1" style="border-inline-end: 5px solid rgba(0, 127, 0, 0.5);"><colgroup span="1" style="border-inline-start: 5px solid red">
<tr>
<td style="border-inline-end: 5px solid rgba(0, 127, 0, 0.5); border-block-end: 5px solid rgba(0, 127, 0, 0.5);"></td>
<td style="border-inline-start: 5px solid red;"></td>
<td></td>
<td></td>
</tr>
<tr>
<td style="border-block-start: 5px solid red;"></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table style="direction: rtl;">
<colgroup span="2"><colgroup span="1" style="border-inline-end: 5px solid rgba(0, 127, 0, 0.5);"><colgroup span="1" style="border-inline-start: 5px solid red">
<tr>
<td style="border-inline-end: 5px solid rgba(0, 127, 0, 0.5); border-block-end: 5px solid rgba(0, 127, 0, 0.5);"></td>
<td style="border-inline-start: 5px solid red;"></td>
<td></td>
<td></td>
</tr>
<tr>
<td style="border-block-start: 5px solid red;"></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table>
<tr style="border-block-end: 5px solid rgba(0, 127, 0, 0.5);">
<td></td>
</tr>
<tr style="border-block-start: 5px solid red;">
<td></td>
</tr>
</table>
<table>
<tbody style="border-block-end: 5px solid rgba(0, 127, 0, 0.5);">
<tr>
<td></td>
</tr>
</tbody>
<tbody style="border-block-start: 5px solid red;">
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<div style="-webkit-writing-mode: vertical-lr; height: 200px; border: solid;">
<table>
<colgroup span="2"><colgroup span="1" style="border-inline-end: 5px solid rgba(0, 127, 0, 0.5);"><colgroup span="1" style="border-inline-start: 5px solid red">
<tr>
<td style="border-inline-end: 5px solid rgba(0, 127, 0, 0.5); border-block-end: 5px solid rgba(0, 127, 0, 0.5);"></td>
<td style="border-inline-start: 5px solid red;"></td>
<td></td>
<td></td>
</tr>
<tr>
<td style="border-block-start: 5px solid red;"></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table style="direction: rtl;">
<colgroup span="2"><colgroup span="1" style="border-inline-end: 5px solid rgba(0, 127, 0, 0.5);"><colgroup span="1" style="border-inline-start: 5px solid red">
<tr>
<td style="border-inline-end: 5px solid rgba(0, 127, 0, 0.5); border-block-end: 5px solid rgba(0, 127, 0, 0.5);"></td>
<td style="border-inline-start: 5px solid red;"></td>
<td></td>
<td></td>
</tr>
<tr>
<td style="border-block-start: 5px solid red;"></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table>
<tr style="border-block-end: 5px solid rgba(0, 127, 0, 0.5);">
<td></td>
</tr>
<tr style="border-block-start: 5px solid red;">
<td></td>
</tr>
</table>
<table>
<tbody style="border-block-end: 5px solid rgba(0, 127, 0, 0.5);">
<tr>
<td></td>
</tr>
</tbody>
<tbody style="border-block-start: 5px solid red;">
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>