1
0
Fork 0
mirror of https://github.com/YunoHost-Apps/mediawiki_ynh.git synced 2024-09-03 19:46:05 +02:00
mediawiki_ynh/sources/mediawiki/docs/uidesign/table-layout.html

59 lines
1.1 KiB
HTML

<!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>