PHPXRef 0.7.1 : MediaWiki-1.24.0 : /docs/uidesign/table-layout.html source

[Summary view] [Print] [Text view]

   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>

PHP Cross Reference of MediaWiki-1.24.0

/docs/uidesign/ -> table-layout.html (source)