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