table-cell-block-overflow.html 919 B

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Test table-cell content overflowing in the block direction for each
  6. vertical-align value</title>
  7. <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
  8. <style>
  9. td {
  10. border: 20px solid teal;
  11. height: 100%;
  12. }
  13. table {
  14. height: 100px;
  15. }
  16. .content {
  17. padding: 20px;
  18. height: 100%;
  19. width: 20px;
  20. background: purple;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <table>
  26. <tr>
  27. <td style="vertical-align: middle">
  28. <div class="content"></div>
  29. </td>
  30. <td style="vertical-align: baseline">
  31. <div class="content"></div>
  32. </td>
  33. <td style="vertical-align: bottom">
  34. <div class="content"></div>
  35. </td>
  36. <td style="vertical-align: top">
  37. <div class="content"></div>
  38. </td>
  39. </tr>
  40. </table>
  41. </body>
  42. </html>