61 lines
1.2 KiB
HTML
61 lines
1.2 KiB
HTML
|
<!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>
|
||
|
|
|