docs/uidesign/table-layout.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4         <style>
   5                 /** This is just for coloring: */
   6                 table { border: 1px solid #CC0; }
   7                 td { border: 1px solid  #CCC; }
   8
   9                 table {
  10                         width: 100%;
  11                         table-layout: fixed;
  12                 }
  13
  14                 #first {
  15                         width: 300px;
  16                 }
  17         </style>
  18 </head>
  19 <body>
  20
  21 <p>
  22 This play with table-layout:fixed; and applying the width to colgroup or col element. Firefox only recongize the width if it is applied on col element!</p>
  23 <p>
  24 On a perfect browser, both tables should look the same</p>
  25
  26 <dl>
  27         <dt>colgroup</dt>
  28         <dd>300 px width is applied to the first colgroup element</dd>
  29 </dl>
  30 <div style="width: 400px;">
  31 <table>
  32         <colgroup id="first" /></colgroup>
  33         <colgroup id="second"/></colgroup>
  34         <colgroup id="third" /></colgroup>
  35         <tr>
  36                 <td>Very long?</td>
  37                 <td>#</td>
  38                 <td>$</td>
  39         </tr>
  40 </table>
  41 </div>
  42
  43 <dl>
  44         <dt>col</dt>
  45         <dd>Each colgroup has an additional col element. The first col element is applied the 300 px width</dd>
  46 </dl>
  47
  48 <div style="width: 400px;">
  49 <table>
  50         <colgroup><col id="first" /></colgroup>
  51         <colgroup><col id="second"/></colgroup>
  52         <colgroup><col id="third" /></colgroup>
  53         <tr>
  54                 <td>Very long?</td>
  55                 <td>#</td>
  56                 <td>$</td>
  57         </tr>
  58 </table>
  59 </div>