blob: 6f5382587c66003bb949b2c0351a79f090fedbb3 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
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>
|
