<!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>
distrib
>
Mageia
>
3
>
i586
>
media
>
core-updates
>
by-pkgid
>
d69f11251b134defcbed31ed9035d28c
>
files
>
67
