summaryrefslogtreecommitdiff
path: root/www/wiki/docs/uidesign/table-layout.html
diff options
context:
space:
mode:
Diffstat (limited to 'www/wiki/docs/uidesign/table-layout.html')
-rw-r--r--www/wiki/docs/uidesign/table-layout.html59
1 files changed, 59 insertions, 0 deletions
diff --git a/www/wiki/docs/uidesign/table-layout.html b/www/wiki/docs/uidesign/table-layout.html
new file mode 100644
index 00000000..2c268199
--- /dev/null
+++ b/www/wiki/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>