MediaWiki 1.30.2

[autoinstallsdev/mediawiki.git] / docs / uidesign / table-layout.html
diff --git a/docs/uidesign/table-layout.html b/docs/uidesign/table-layout.html

new file mode 100644 (file)

index 0000000..2c26819
--- /dev/null
+++ b/docs/uidesign/table-layout.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+       <style>
+               /** This is just for coloring: */
+               table { border: 1px solid #CC0; }
+               td { border: 1px solid  #CCC; }
+
+               table {
+                       width: 100%;
+                       table-layout: fixed;
+               }
+
+               #first {
+                       width: 300px;
+               }
+       </style>
+</head>
+<body>
+
+<p>
+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>
+<p>
+On a perfect browser, both tables should look the same</p>
+
+<dl>
+       <dt>colgroup</dt>
+       <dd>300 px width is applied to the first colgroup element</dd>
+</dl>
+<div style="width: 400px;">
+<table>
+       <colgroup id="first" /></colgroup>
+       <colgroup id="second"/></colgroup>
+       <colgroup id="third" /></colgroup>
+       <tr>
+               <td>Very long?</td>
+               <td>#</td>
+               <td>$</td>
+       </tr>
+</table>
+</div>
+
+<dl>
+       <dt>col</dt>
+       <dd>Each colgroup has an additional col element. The first col element is applied the 300 px width</dd>
+</dl>
+
+<div style="width: 400px;">
+<table>
+       <colgroup><col id="first" /></colgroup>
+       <colgroup><col id="second"/></colgroup>
+       <colgroup><col id="third" /></colgroup>
+       <tr>
+               <td>Very long?</td>
+               <td>#</td>
+               <td>$</td>
+       </tr>
+</table>
+</div>