|
1 <html> |
|
2 <head><style> |
|
3 /* cellspacing=0 cellpadding=0 */ |
|
4 table { border-spacing: 0 } |
|
5 td, th { padding: 0 } |
|
6 |
|
7 /* Colors for the three cell types */ |
|
8 td.a { background: lightgreen; } |
|
9 td.b { background: yellow; } |
|
10 td.c { background: blue; } |
|
11 |
|
12 /* Set table-width, to replace shrinkwrap */ |
|
13 /* and and min-width on colspanning cell */ |
|
14 table { width: 500px; } |
|
15 |
|
16 /* Set %-width on 2nd cell of first row in tables */ |
|
17 table#t0 td.b { width: 1% } |
|
18 table#t1 td.b { width: 5% } |
|
19 table#t2 td.b { width: 10% } |
|
20 table#t3 td.b { width: 30% } |
|
21 table#t4 td.b { width: 50% } |
|
22 table#t5 td.b { width: 75% } |
|
23 table#t6 td.b { width: 80% } |
|
24 table#t7 td.b { width: 90% } |
|
25 table#t8 td.b { width: 95% } |
|
26 table#t9 td.b { width: 100% } |
|
27 |
|
28 </style></head> |
|
29 <body> |
|
30 <table id="t0"><tr> |
|
31 <td class="a">foo</td> |
|
32 <td class="b">foo</td> |
|
33 </tr><tr> |
|
34 <td class="c"> </td><td class="c"> </td> |
|
35 </tr></table> |
|
36 |
|
37 <table id="t1"><tr> |
|
38 <td class="a">foo</td> |
|
39 <td class="b">foo</td> |
|
40 </tr><tr> |
|
41 <td class="c"> </td><td class="c"> </td> |
|
42 </tr></table> |
|
43 |
|
44 <table id="t2"><tr> |
|
45 <td class="a">foo</td> |
|
46 <td class="b">foo</td> |
|
47 </tr><tr> |
|
48 <td class="c"> </td><td class="c"> </td> |
|
49 </tr></table> |
|
50 |
|
51 <table id="t3"><tr> |
|
52 <td class="a">foo</td> |
|
53 <td class="b">foo</td> |
|
54 </tr><tr> |
|
55 <td class="c"> </td><td class="c"> </td> |
|
56 </tr></table> |
|
57 |
|
58 <table id="t4"><tr> |
|
59 <td class="a">foo</td> |
|
60 <td class="b">foo</td> |
|
61 </tr><tr> |
|
62 <td class="c"> </td><td class="c"> </td> |
|
63 </tr></table> |
|
64 |
|
65 <table id="t5"><tr> |
|
66 <td class="a">foo</td> |
|
67 <td class="b">foo</td> |
|
68 </tr><tr> |
|
69 <td class="c"> </td><td class="c"> </td> |
|
70 </tr></table> |
|
71 |
|
72 <table id="t6"><tr> |
|
73 <td class="a">foo</td> |
|
74 <td class="b">foo</td> |
|
75 </tr><tr> |
|
76 <td class="c"> </td><td class="c"> </td> |
|
77 </tr></table> |
|
78 |
|
79 <table id="t7"><tr> |
|
80 <td class="a">foo</td> |
|
81 <td class="b">foo</td> |
|
82 </tr><tr> |
|
83 <td class="c"> </td><td class="c"> </td> |
|
84 </tr></table> |
|
85 |
|
86 <table id="t8"><tr> |
|
87 <td class="a">foo</td> |
|
88 <td class="b">foo</td> |
|
89 </tr><tr> |
|
90 <td class="c"> </td><td class="c"> </td> |
|
91 </tr></table> |
|
92 |
|
93 <table id="t9"><tr> |
|
94 <td class="a">foo</td> |
|
95 <td class="b">foo</td> |
|
96 </tr><tr> |
|
97 <td class="c"> </td><td class="c"> </td> |
|
98 </tr></table> |
|
99 </body> |
|
100 </html> |