Skip to content

Commit 688b5f8

Browse files
FremyCompanyFremyCompany
committed
[css-tables] Clarified section on final layout
1 parent ace9247 commit 688b5f8

File tree

1 file changed

+42
-37
lines changed

1 file changed

+42
-37
lines changed

‎css-tables-3/Overview.bs‎

Lines changed: 42 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2484,10 +2484,12 @@ spec:css21; type:property; text:max-width
24842484
This section will explain where internal table boxes should be rendered.
24852485

24862486
<div class="issue">
2487-
We have to decide what visibility:collapse does.
2488-
My proposal is to do like "hidden" but in addition
2489-
use the following formula to shift back the following rows/columns.
2490-
The total width/height of the table would not be affected, only the cells position would.
2487+
We need a resolution on what visibility:collapse does.
2488+
The current proposal is to do like "hidden" but in addition
2489+
use the following formula to shift back the next rows/columns
2490+
to accomodate the disappearance of <a href="#visible-track">collapsed tracks</a>.
2491+
The total width/height of the table would not be affected,
2492+
only the bounding client rectangles of the cells would be.
24912493
<a class="hint" href="http://codepen.io/FremyCompany/pen/KVRzWe?editors=1100">!!Testcase</a>.
24922494
<a class="hint" href="http://codepen.io/FremyCompany/pen/KVRzQx?editors=1100">!!Testcase</a>.
24932495
<a class="hint" href="http://codepen.io/FremyCompany/pen/MKGyBx?editors=1100">!!Testcase</a>.
@@ -2496,19 +2498,11 @@ spec:css21; type:property; text:max-width
24962498
<p>
24972499
Once the width of each column and the height of each row of the table grid has been determined,
24982500
the final step of algorithm is to assign to each table-internal box its final position.
2499-
2500-
<p>
2501-
For the purpose of this algorithm, a column or row
2502-
is considered visible if it pass each of those conditions:
2503-
<ul><li>It is not explicitely defined by a table-column or table-row element, or:<br/>
2504-
It is explicitely defined by a table-column or table-row element that does not have visibility:collapsed
2505-
<li>It is not logically contained in a table-column-grouping or table-row-grouping element, or:<br/>
2506-
It is logically contained in a table-column-grouping or table-row-grouping element that does not have visibility:collapsed</ul>
2507-
2501+
25082502
<div class="note">
25092503
The position defined here is the position of the children
25102504
inside the space reserved for the table, which excludes only its margins.
2511-
This is because the captions of the table are somewhat outside the padding area of the table.
2505+
This is because the captions of the table are somewhat outside the border-box area of the table.
25122506
</div>
25132507

25142508
<p>
@@ -2518,7 +2512,7 @@ spec:css21; type:property; text:max-width
25182512
<ul><li>the width/height assigned to the caption during layout</ul>
25192513
<li>top location is the sum of:
25202514
<ul><li>the height reserved for previous top captions (including margins), if any
2521-
<li>any necessary extra margin remaining after collapsing margins with the previous caption, if any.</ul>
2515+
<li>any necessary extra top margin remaining after collapsing margins with the previous caption, if any.</ul>
25222516
<li>left location is the sum of:
25232517
<ul><li>the margin left of the caption
25242518
<li>half of (the table width minus the width of caption and its total horizontal margin).</ul>
@@ -2528,14 +2522,14 @@ spec:css21; type:property; text:max-width
25282522
The <b>position of any table-cell, table-track, or table-track-grouping box</b> within the table is defined as the rectangle whose:
25292523
<ul class="compact">
25302524
<li>width/height is the sum of:
2531-
<ul><li>the widths/heights of all spanned visible columns/rows
2532-
<li>the horizontal/vertical 'border-spacing' times the amount of spanned visible columns/rows minus one
2525+
<ul><li>the widths/heights of all spanned <a href="#visible-track">visible</a> columns/rows
2526+
<li>the horizontal/vertical 'border-spacing' times the amount of spanned <a href="#visible-track">visible</a> columns/rows minus one
25332527
</ul>
25342528
<li>left/top location is the sum of:
25352529
<ul><li>for top: the height reserved for top captions (including margins), if any
25362530
<li>the padding-left/padding-top and border-left-width/border-top-width of the table
2537-
<li>the widths/heights of all previous visible columns/rows
2538-
<li>the horizontal/vertical 'border-spacing' times the amount of previous visible columns/rows plus one
2531+
<li>the widths/heights of all previous <a href="#visible-track">visible</a> columns/rows
2532+
<li>the horizontal/vertical 'border-spacing' times the amount of previous <a href="#visible-track">visible</a> columns/rows plus one
25392533
</ul>
25402534
</ul>
25412535

@@ -2554,34 +2548,20 @@ spec:css21; type:property; text:max-width
25542548
<li>top location is the sum of:
25552549
<ul><li>the height reserved for top captions (including margins), if any
25562550
<li>padding-top and border-top-width of the table
2557-
<li>the height of all visible rows
2551+
<li>the height of all <a href="#visible-track">visible</a> rows
25582552
<li>padding-bottom and border-bottom-width of the table
25592553
<li>the height reserved for previous bottom captions (including margins), if any
2560-
<li>any necessary extra margin remaining after collapsing margins with the previous bottom caption, if any.</ul>
2554+
<li>any necessary extra top margin remaining after collapsing margins with the previous bottom caption, if any.</ul>
25612555
<li>left location is the sum of:
25622556
<ul><li>the margin left of the caption
25632557
<li>half of (the table width minus the width of caption and its total horizontal margin).</ul>
25642558
</ul>
25652559

2566-
<div class="example">
2567-
<figure>
2568-
<img alt="A table with a caption above it" src="images/table_container.png" width="533" height="483">
2569-
<figcaption>Diagram of a table with a caption above it.</figcaption>
2570-
</figure>
2571-
</div>
2572-
2573-
<div class="note">
2574-
<a id="spanning-ghost-rows" class="hint" href="https://jsfiddle.net/3pox7b4f/">~Testcase</a>
2575-
<a class="hint" href="https://jsfiddle.net/3pox7b4f/1/">!!Testcase</a>
2576-
<a class="hint" href="https://jsfiddle.net/3pox7b4f/3/">!!Testcase</a>
2577-
<a class="hint" href="https://jsfiddle.net/3pox7b4f/4/">!!Testcase</a>
2578-
<a class="hint" href="https://jsfiddle.net/3pox7b4f/5/">Testcase</a>
2579-
</div>
2580-
25812560
<div class="advisement">
2561+
<strong>Cell overflow: </strong>
25822562
If the table layout mode is "fixed",
25832563
if the content of some cell has grown more than the cell during its second layout pass
2584-
or if some tracks spanned by visible cells are deemed not visible,
2564+
or if some tracks spanned by visible cells are deemed not <a href="#visible-track">visible</a>,
25852565
the content of some cells may exceed the available space,
25862566
and cause an overflow.
25872567
Such overflow should behave exactly
@@ -2592,6 +2572,31 @@ spec:css21; type:property; text:max-width
25922572
<a class="hint" href="https://jsfiddle.net/24bz3Lp1/3/">Testcase</a>
25932573
</div>
25942574

2575+
<div class="advisement">
2576+
<strong>Visible tracks: </strong>
2577+
For the purpose of this algorithm, a column or row
2578+
is considered a <dfn id="visible-track">visible track</dfn> if both of those conditions apply:
2579+
<ul><li>It is not explicitely defined by a table-column or table-row element, or:<br/>
2580+
It is explicitely defined by a table-column or table-row element that does not have visibility:collapse
2581+
<li>It is not logically contained in a table-column-grouping or table-row-grouping element, or:<br/>
2582+
It is logically contained in a table-column-grouping or table-row-grouping element that does not have visibility:collapse</ul>
2583+
</div>
2584+
2585+
<div class="example">
2586+
<figure>
2587+
<img alt="A table with a caption above it, showing how the caption margins are totally nested inside the table margins, but are outside the border-box of the table nonetheless." src="images/table_container.png" width="533" height="483">
2588+
<figcaption>Diagram of a table with a caption above it.</figcaption>
2589+
</figure>
2590+
</div>
2591+
2592+
<div class="note">
2593+
<a id="spanning-ghost-rows" class="hint" href="https://jsfiddle.net/3pox7b4f/">~Testcase</a>
2594+
<a class="hint" href="https://jsfiddle.net/3pox7b4f/1/">!!Testcase</a>
2595+
<a class="hint" href="https://jsfiddle.net/3pox7b4f/3/">!!Testcase</a>
2596+
<a class="hint" href="https://jsfiddle.net/3pox7b4f/4/">!!Testcase</a>
2597+
<a class="hint" href="https://jsfiddle.net/3pox7b4f/5/">Testcase</a>
2598+
</div>
2599+
25952600
<!--------------------------------------------------------------------------------->
25962601
<h2 id="rendering">Rendering</h2>
25972602

0 commit comments

Comments
 (0)