| <!DOCTYPE html> |
| |
| <html> |
| <head> |
| <style> |
| div { |
| -webkit-transform-origin: top left; |
| margin: 10px; |
| } |
| table { |
| margin: 20px; |
| } |
| table.collapsed { |
| border-collapse: collapse; |
| } |
| td { |
| height: 10px; |
| width: 10px; |
| border: 1px solid black; |
| } |
| |
| .shrunk { |
| -webkit-transform: scale(0.35); |
| } |
| |
| .columns { |
| -webkit-column-width: 10px; |
| -webkit-column-rule: 1px solid black; |
| -webkit-column-fill: auto; |
| column-width: 10px; |
| column-rule: 1px solid black; |
| column-fill: auto; |
| width: 600px; |
| height: 100px; |
| } |
| |
| .outlines span { |
| outline: 1px solid black; |
| margin: 4px; |
| padding: 2px; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <!-- Both tables should render with antialiased borders. --> |
| <div class="shrunk"> |
| <table class="collapsed"> |
| <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> |
| <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> |
| <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> |
| <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> |
| </table> |
| <table> |
| <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> |
| <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> |
| <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> |
| <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> |
| </table> |
| |
| <!-- Column rules should be antialiased --> |
| <div class="columns"> |
| _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ |
| </div> |
| |
| <div class="outlines"> |
| <span>I am a span<br>I am</span> <span>I am<br>a span I am</span> |
| <span>I am a span<br>I am</span> <span>I am<br>a span I am</span> |
| <span>I am a span<br>I am</span> <span>I am<br>a span I am</span> |
| <span>I am a span<br>I am</span> <span>I am<br>a span I am</span> |
| </div> |
| </div> |
| |
| </body> |
| </html> |
