<!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><span class="middle" style="-webkit-writing-mode: vertical-rl; width: 100px; background-color: red;">vertical text</span>
</table>
<table border="1">
    <tr><td><div style="-webkit-writing-mode: vertical-rl; width: 100px; background-color: red;">vertical text</div>
</table>
</body></html>