diff options
| author | Pierre Schmitz <pierre@archlinux.de> | 2012-05-03 13:01:35 +0200 |
|---|---|---|
| committer | Pierre Schmitz <pierre@archlinux.de> | 2012-05-03 13:01:35 +0200 |
| commit | d9022f63880ce039446fba8364f68e656b7bf4cb (patch) | |
| tree | 16b40fbf17bf7c9ee6f4ead25b16dd192378050a /docs/uidesign/table-layout.html | |
| parent | 27cf83d177256813e2e802241085fce5dd0f3fb9 (diff) | |
Update to MediaWiki 1.19.0
Diffstat (limited to 'docs/uidesign/table-layout.html')
| -rw-r--r-- | docs/uidesign/table-layout.html | 60 |
1 files changed, 60 insertions, 0 deletions
diff --git a/docs/uidesign/table-layout.html b/docs/uidesign/table-layout.html new file mode 100644 index 00000000..6f538258 --- /dev/null +++ b/docs/uidesign/table-layout.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> +<head> + <style type="text/css"> + /** 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> + |