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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: table-layout: fixed - cell in the first row with specified width</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" />
<link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0502.html" title="[css21] Section 17.5.2.1 should be clarified" />
<link rel="match" href="fixed-table-layout-003e09-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="A cell in the first row with specified non-auto 'width' sets the width for its column in the absence of a column element with specified non-auto width. This test checks the 'border-collapse: collapse' model with non-zero symetrical horizontal cell padding and with one non-zero horizontal cell border." />
<style type="text/css"><![CDATA[
div, table {font: 1.25em/1.2 serif;}
table
{
border-collapse: collapse;
table-layout: fixed;
width: 400px;
}
td {padding: 0px 24px;}
td#tested-cell
{
background-color: blue;
border-left: orange solid 0px;
border-right: orange solid 72px;
color: blue;
width: 80px;
}
div#reference
{
background-color: black;
color: black;
margin-left: 118px;
/*
"
In the fixed table layout algorithm, the width of each column is determined as follows:
(...) a cell in the first row with a value other than 'auto' for the 'width' property determines the width for that column. (...)
Any remaining columns equally divide the remaining horizontal table space (minus borders or cell spacing).
"
Section 17.5.2.1 Fixed table layout
http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout
Middle column width calculations
--------------------------------
36px : half of border-left since such border must be split with cell in 1st column
+
24px : padding-left of the cell in the middle column
+
80px : width of the cell in the middle column
+
24px : padding-right of the cell in the middle column
=======
164px : width of the middle column
So,
400px : table set width
-
164px : width of the middle column
======
236px
So, each of the 2 remaining columns must be
half of such extra horizontal table space,
which is 236px divided by 2 == 118px.
1st column width calculations
-----------------------------
24px : padding-left of cell in 1st column
+
(solve) : width of cell in 1st column
+
24px : padding-right of cell in 1st column
======
118px : width of 1st column
So, the width of the cell in first column must be exactly 70px.
3rd column width calculations
-----------------------------
36px : half of border-right of cell in middle column
since such border must be split with cell in 3rd column
+
24px : padding-left of cell in 3rd column
+
(solve) : width of cell in 3rd column
+
24px : padding-right of cell in 3rd column
=======
118px : width of 3rd column
So, the width of the cell in 3rd column must be exactly 34px.
Finally, the precise horizontal point where the border-right of cell
in first column begins to be drawn, painted is:
24px : padding-left of cell in 1st column
+
70px : width of cell in 1st column
+
24px : padding-right of cell in 1st column
=======
118px
Therefore the margin-left: 118px value of the div#reference.
*/
width: 200px;
}
]]></style>
</head>
<body>
<p>Test passes if the blue stripe and orange stripe are as a whole <strong>exactly as wide as</strong> the black stripe.</p>
<table>
<col />
<col />
<col />
<tr>
<td></td>
<td id="tested-cell">E09</td>
<td></td>
</tr>
</table>
<div id="reference">200px wide</div>
</body>
</html>
|
