| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> |
| |
| <!-- Work done for Netscape. License unknown. --> |
| |
| <html lang="en-US"> |
| <head> |
| <title>table-layout: fixed</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> |
| <meta http-equiv="Content-Style-Type" content="text/css"> |
| <link rel="copyright" href="/~dbaron/legal.html"> |
| <style type="text/css"> |
| |
| table { table-layout: fixed; } |
| |
| table td { border: thin solid; } |
| |
| .full { width: 100%; } |
| |
| .half { width: 50%; } |
| |
| </style> |
| </head> |
| <body> |
| <h1>table-layout: fixed</h1> |
| |
| <p>The following tables should be laid out in the traditional manner |
| because their widths are <code>auto</code>:</p> |
| |
| <table> |
| <tr> |
| <td>Data</td> |
| <td>Data</td> |
| <td>Data</td> |
| </tr> |
| <tr> |
| <td>Data</td> |
| <td>Data</td> |
| <td>Data</td> |
| </tr> |
| </table> |
| |
| <table> |
| <tr> |
| <td>Data</td> |
| <td>Data</td> |
| <td>Data</td> |
| </tr> |
| <tr> |
| <td>Data</td> |
| <td>Data</td> |
| <td> |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| </td> |
| </tr> |
| </table> |
| |
| <table> |
| <tr> |
| <td>Data</td> |
| <td>Data</td> |
| <td> |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| </td> |
| </tr> |
| <tr> |
| <td>Data</td> |
| <td>Data</td> |
| <td>Data</td> |
| </tr> |
| </table> |
| |
| |
| <p>All the columns in the following three tables should divide |
| equally the available space (100% of the width of the page):</p> |
| |
| <table class="full"> |
| <tr> |
| <td>Data</td> |
| <td>Data</td> |
| <td>Data</td> |
| </tr> |
| <tr> |
| <td>Data</td> |
| <td>Data</td> |
| <td>Data</td> |
| </tr> |
| </table> |
| |
| <table class="full"> |
| <tr> |
| <td>Data</td> |
| <td>Data</td> |
| <td>Data</td> |
| </tr> |
| <tr> |
| <td>Data</td> |
| <td>Data</td> |
| <td> |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| </td> |
| </tr> |
| </table> |
| |
| <table class="full"> |
| <tr> |
| <td>Data</td> |
| <td>Data</td> |
| <td> |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| </td> |
| </tr> |
| <tr> |
| <td>Data</td> |
| <td>Data</td> |
| <td>Data</td> |
| </tr> |
| </table> |
| |
| |
| <p>All the columns in the following three tables should divide |
| equally the available space (50% of the width of the page):</p> |
| |
| <table class="half"> |
| <tr> |
| <td>Data</td> |
| <td>Data</td> |
| <td>Data</td> |
| </tr> |
| <tr> |
| <td>Data</td> |
| <td>Data</td> |
| <td>Data</td> |
| </tr> |
| </table> |
| |
| <table class="half"> |
| <tr> |
| <td>Data</td> |
| <td>Data</td> |
| <td>Data</td> |
| </tr> |
| <tr> |
| <td>Data</td> |
| <td>Data</td> |
| <td> |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| </td> |
| </tr> |
| </table> |
| |
| <table class="half"> |
| <tr> |
| <td>Data</td> |
| <td>Data</td> |
| <td> |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| Lots and lots and lots of data. Lots and lots and lots of data. |
| </td> |
| </tr> |
| <tr> |
| <td>Data</td> |
| <td>Data</td> |
| <td>Data</td> |
| </tr> |
| </table> |
| |
| |
| <p>This test is still being written... </p> |
| |
| <hr title="Beginning of Footer"> |
| <p>(Back to |
| <a href="./">CSS Testing Information</a>, |
| <a href="../../">David Baron</a>)</p> |
| <p><a href="/~dbaron/" title="David Baron's Homepage">LDB</a>, |
| <a rev="made" href="mailto:dbaron@fas.harvard.edu" TITLE="Send e-mail to David Baron">dbaron@fas.harvard.edu</a></p> |
| |
| </body></html> |
