vertical-table-specified-width-2.html (780B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <style> 6 html { overflow: hidden; } 7 table { 8 writing-mode: vertical-rl; 9 border-spacing: 0; 10 width: 260px; /* natural width would be 170px; this adds 30px to each row */ 11 } 12 td { padding: 0; } 13 .r1 { width: 50px; background: #800; } 14 .r2 { width: 100px; background: #080; } 15 .r3 { width: 20px; background: #008; } 16 .c1 { height: 20px; } 17 .c2 { height: 30px; } 18 .c3 { height: 40px; } 19 .c4 { height: 50px; } 20 </style> 21 </head> 22 <body> 23 24 <table> 25 <tr> 26 <td class="r3 c1"></td> 27 <td class="r3 c2"></td> 28 <td class="r3 c3" rowspan=3></td> 29 <td class="r3 c4" rowspan=2></td> 30 </tr> 31 <tr> 32 <td class="r2 c1" rowspan=2></td> 33 <td class="r2 c2"></td> 34 </tr> 35 <tr> 36 <td class="r1 c2"></td> 37 <td class="r1 c4"></td> 38 </tr> 39 </table> 40 41 </body> 42 </html>