table-cell-align-002-ref.html (1047B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Writing Modes reference: text-align in orthogonal table cell</title> 4 5 <meta name="flags" content="ahem" /> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 8 <style> 9 table { 10 font: 20px/1 Ahem; 11 border: 1px solid gray; 12 } 13 14 td { 15 width: 3.5em; 16 height: 1.75em; 17 padding: 0; 18 color: green; 19 vertical-align: top; 20 } 21 22 td > div { 23 position: relative; 24 top: 0.5em; 25 } 26 27 .left { 28 left: 0.5em; 29 } 30 .center { 31 left: 1em; 32 } 33 .right { 34 left: 1.5em; 35 } 36 </style> 37 38 <table> 39 <tr> 40 <td><div class=left>X</div></td> 41 </tr> 42 <tr> 43 <td><div class=center>X</div></td> 44 </tr> 45 <tr> 46 <td><div class=right>X</div></td> 47 </tr> 48 <tr> 49 <td><div class=left>X</div></td> 50 </tr> 51 <tr> 52 <td><div class=right>X</div></td> 53 </tr> 54 </table> 55 <br> 56 <table> 57 <tr> 58 <td><div class=left>X</div></td> 59 </tr> 60 <tr> 61 <td><div class=center>X</div></td> 62 </tr> 63 <tr> 64 <td><div class=right>X</div></td> 65 </tr> 66 <tr> 67 <td><div class=right>X</div></td> 68 </tr> 69 <tr> 70 <td><div class=left>X</div></td> 71 </tr> 72 </table>