all-ref.html (4505B)
1 <!DOCTYPE html> 2 <style> 3 td { text-align: center; } 4 5 .parent { 6 box-sizing: border-box; 7 width: 60px; 8 height: 60px; 9 border: solid; 10 border-width: 1px 2px 3px 4px; 11 padding: 0px 4px 8px 12px; 12 position: relative; 13 } 14 15 .child { 16 position: absolute; 17 width: 10px; 18 height: 10px; 19 background: green; 20 } 21 22 .top-left { 23 top: 0; 24 left: 12px; 25 } 26 27 .top-right { 28 top: 0; 29 right: 4px; 30 } 31 32 .bottom-left { 33 bottom: 8px; 34 left: 12px; 35 } 36 37 .bottom-right { 38 bottom: 8px; 39 right: 4px; 40 } 41 </style> 42 43 <table> 44 <tr> 45 <td></td> 46 <td colspan=2>LTR</td> 47 <td colspan=2>RTL</td> 48 </tr> 49 <tr> 50 <td></td> 51 <td>Y</td> 52 <td>X</td> 53 <td>Y</td> 54 <td>X</td> 55 </tr> 56 <tr> 57 <td>HTB</td> 58 <td> 59 <div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-y: scroll;"> 60 <div class="child top-left"></div> 61 <div class="child top-right"></div> 62 <div class="child bottom-left"></div> 63 <div class="child bottom-right"></div> 64 </div> 65 </td> 66 <td> 67 <div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-x: scroll;"> 68 <div class="child top-left"></div> 69 <div class="child top-right"></div> 70 <div class="child bottom-left"></div> 71 <div class="child bottom-right"></div> 72 </div> 73 </td> 74 <td> 75 <div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-y: scroll;"> 76 <div class="child top-left"></div> 77 <div class="child top-right"></div> 78 <div class="child bottom-left"></div> 79 <div class="child bottom-right"></div> 80 </div> 81 </td> 82 <td> 83 <div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-x: scroll;"> 84 <div class="child top-left"></div> 85 <div class="child top-right"></div> 86 <div class="child bottom-left"></div> 87 <div class="child bottom-right"></div> 88 </div> 89 </td> 90 </tr> 91 <tr> 92 <td>VRL</td> 93 <td> 94 <div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-y: scroll;"> 95 <div class="child top-left"></div> 96 <div class="child top-right"></div> 97 <div class="child bottom-left"></div> 98 <div class="child bottom-right"></div> 99 </div> 100 </td> 101 <td> 102 <div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-x: scroll;"> 103 <div class="child top-left"></div> 104 <div class="child top-right"></div> 105 <div class="child bottom-left"></div> 106 <div class="child bottom-right"></div> 107 </div> 108 </td> 109 <td> 110 <div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-y: scroll;"> 111 <div class="child top-left"></div> 112 <div class="child top-right"></div> 113 <div class="child bottom-left"></div> 114 <div class="child bottom-right"></div> 115 </div> 116 </td> 117 <td> 118 <div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-x: scroll;"> 119 <div class="child top-left"></div> 120 <div class="child top-right"></div> 121 <div class="child bottom-left"></div> 122 <div class="child bottom-right"></div> 123 </div> 124 </td> 125 </tr> 126 <tr> 127 <td>VLR</td> 128 <td> 129 <div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-y: scroll;"> 130 <div class="child top-left"></div> 131 <div class="child top-right"></div> 132 <div class="child bottom-left"></div> 133 <div class="child bottom-right"></div> 134 </div> 135 </td> 136 <td> 137 <div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-x: scroll;"> 138 <div class="child top-left"></div> 139 <div class="child top-right"></div> 140 <div class="child bottom-left"></div> 141 <div class="child bottom-right"></div> 142 </div> 143 </td> 144 <td> 145 <div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-y: scroll;"> 146 <div class="child top-left"></div> 147 <div class="child top-right"></div> 148 <div class="child bottom-left"></div> 149 <div class="child bottom-right"></div> 150 </div> 151 </td> 152 <td> 153 <div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-x: scroll;"> 154 <div class="child top-left"></div> 155 <div class="child top-right"></div> 156 <div class="child bottom-left"></div> 157 <div class="child bottom-right"></div> 158 </div> 159 </td> 160 </tr> 161 </table>