<!DOCTYPE html>
<html><head>
    <meta charset="UTF-8">
<style>
    .middle { vertical-align: middle; }
</style>
</head><body>
The table should not overflow its contents, and 1st table and 2nd table look same.
<table border="1">
    <tr><td><div class="middle" style="writing-mode: vertical-rl; width: 100px; background-color: red;">vertical text</div>
</table>
<table border="1">
    <tr><td><div style="writing-mode: vertical-rl; width: 100px; background-color: red;">vertical text</div>
</table>
</body></html>
