<style>
    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: horizontal-bt; width: 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>