Skip to content

Commit 9bd7091

Browse files
FremyCompanyFremyCompany
committed
[css-tables] Vastly improved positioning of table internal boxes
1 parent 478945f commit 9bd7091

2 files changed

Lines changed: 81 additions & 17 deletions

File tree

‎css-tables-3/Overview.bs‎

Lines changed: 81 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2444,16 +2444,10 @@ spec:css21; type:property; text:max-width
24442444
</div>
24452445

24462446
<!--------------------------------------------------------------------------------->
2447-
<h3 id="bounding-box-assignment">Positioning of cells and captions</h3>
2447+
<h3 id="bounding-box-assignment">Positioning of cells, captions and other internal table boxes</h3>
24482448

24492449
<p style="font-style: italic">
2450-
This section will explain where cells and captions should be rendered.
2451-
2452-
<div class="issue">
2453-
We have to decide whether we want captions to act like a row, or be independant.
2454-
Right now their existence is eluded to avoid answering the question.
2455-
<a class="hint" href="https://jsfiddle.net/q1qwo6j6/1/">!!Testcase</a>
2456-
</div>
2450+
This section will explain where internal table boxes should be rendered.
24572451

24582452
<div class="issue">
24592453
We have to decide what visibility:collapse does.
@@ -2464,35 +2458,105 @@ spec:css21; type:property; text:max-width
24642458
<a class="hint" href="http://codepen.io/FremyCompany/pen/KVRzQx?editors=1100">!!Testcase</a>.
24652459
<a class="hint" href="http://codepen.io/FremyCompany/pen/MKGyBx?editors=1100">!!Testcase</a>.
24662460
</div>
2461+
2462+
<p>
2463+
Once the width of each column and the height of each row of the table grid has been determined,
2464+
the final step of algorithm is to assign to each table-internal box its final position.
2465+
2466+
<p>
2467+
For the purpose of this algorithm, a column or row
2468+
is considered visible if it pass each of those conditions:
2469+
<ul><li>It is not explicitely defined by a table-column or table-row element, or:<br/>
2470+
It is explicitely defined by a table-column or table-row element that does not have visibility:collapsed
2471+
<li>It is not logically contained in a table-column-grouping or table-row-grouping element, or:<br/>
2472+
It is logically contained in a table-column-grouping or table-row-grouping element that does not have visibility:collapsed</ul>
24672473

2474+
<div class="note">
2475+
The position defined here is the position of the children
2476+
inside the space reserved for the table, which excludes only its margins.
2477+
This is because the captions of the table are somewhat outside the padding area of the table.
2478+
</div>
2479+
24682480
<p>
2469-
Once the width of each column, and height of each row has been determined,
2470-
the position of any table cell C is defined as the rectangle whose:
2481+
The <b>position of any table-caption having "top" as 'caption-side'</b> within the table is defined as the rectangle whose:
2482+
<ul class="compact">
2483+
<li>width/height is:
2484+
<ul><li>the width/height assigned to the caption during layout</ul>
2485+
<li>top location is the sum of:
2486+
<ul><li>the height reserved for previous top captions (including margins), if any
2487+
<li>any necessary extra margin remaining after collapsing margins with the previous caption, if any.</ul>
2488+
<li>left location is the sum of:
2489+
<ul><li>the margin left of the caption
2490+
<li>half of (the table width minus the width of caption and its total horizontal margin).</ul>
2491+
</ul>
2492+
2493+
<p>
2494+
The <b>position of any table-cell, table-track, or table-track-grouping box</b> within the table is defined as the rectangle whose:
24712495
<ul class="compact">
24722496
<li>width/height is the sum of:
2473-
<ul><li>the widths/heights of all spanned columns/rows
2474-
<li>the horizontal/vertical 'border-spacing' times the amount of spanned columns/rows minus one
2497+
<ul><li>the widths/heights of all spanned visible columns/rows
2498+
<li>the horizontal/vertical 'border-spacing' times the amount of spanned visible columns/rows minus one
24752499
</ul>
24762500
<li>left/top location is the sum of:
2477-
<ul><li>the widths/heights of all previous columns/rows
2478-
<li>the horizontal/vertical 'border-spacing' times the amount of previous columns/rows plus one
2501+
<ul><li>for top: the height reserved for top captions (including margins), if any
2502+
<li>the padding-left/padding-top and border-left-width/border-top-width of the table
2503+
<li>the widths/heights of all previous visible columns/rows
2504+
<li>the horizontal/vertical 'border-spacing' times the amount of previous visible columns/rows plus one
24792505
</ul>
24802506
</ul>
2507+
2508+
<div class="advisement">
2509+
For table-track and table-track-grouping elements,
2510+
all tracks of the opposite direction to the grouping are considered spanned.
2511+
For instance, a table-header-group is considered to span all the columns,
2512+
and a table-column-group is considered to span all the rows.
2513+
</div>
2514+
2515+
<p>
2516+
The <b>position of any table-caption having "bottom" as 'caption-side'</b> within the table is defined as the rectangle whose:
2517+
<ul class="compact">
2518+
<li>width/height is:
2519+
<ul><li>the width/height assigned to the caption during layout</ul>
2520+
<li>top location is the sum of:
2521+
<ul><li>the height reserved for top captions (including margins), if any
2522+
<li>padding-top and border-top-width of the table
2523+
<li>the height of all visible rows
2524+
<li>padding-bottom and border-bottom-width of the table
2525+
<li>the height reserved for previous bottom captions (including margins), if any
2526+
<li>any necessary extra margin remaining after collapsing margins with the previous bottom caption, if any.</ul>
2527+
<li>left location is the sum of:
2528+
<ul><li>the margin left of the caption
2529+
<li>half of (the table width minus the width of caption and its total horizontal margin).</ul>
2530+
</ul>
2531+
2532+
<div class="example">
2533+
<figure>
2534+
<img alt="A table with a caption above it" src="images/table_container.png" width="533" height="483">
2535+
<figcaption>Diagram of a table with a caption above it.</figcaption>
2536+
</figure>
2537+
</div>
2538+
2539+
<div class="note">
24812540
<a id="spanning-ghost-rows" class="hint" href="https://jsfiddle.net/3pox7b4f/">~Testcase</a>
24822541
<a class="hint" href="https://jsfiddle.net/3pox7b4f/1/">!!Testcase</a>
24832542
<a class="hint" href="https://jsfiddle.net/3pox7b4f/3/">!!Testcase</a>
24842543
<a class="hint" href="https://jsfiddle.net/3pox7b4f/4/">!!Testcase</a>
24852544
<a class="hint" href="https://jsfiddle.net/3pox7b4f/5/">Testcase</a>
2545+
</div>
24862546

2487-
<p>
2547+
<div class="advisement">
24882548
If the table layout mode is "fixed",
2489-
the content of some cells may exceed the available horizontal space,
2549+
if the content of some cell has grown more than the cell during its second layout pass
2550+
or if some tracks spanned by visible cells are deemed not visible,
2551+
the content of some cells may exceed the available space,
24902552
and cause an overflow.
24912553
Such overflow should behave exactly
2492-
like if the cell was an absolutely positioned display:block box.
2554+
like if the cell was an absolutely positioned display:block box
2555+
with the appropriate alignment in place to keep its content in place relative to its top left.
24932556
<a class="hint" href="https://jsfiddle.net/24bz3Lp1/">!Testcase</a>
24942557
<a class="hint" href="https://jsfiddle.net/24bz3Lp1/1/">!Testcase</a>
24952558
<a class="hint" href="https://jsfiddle.net/24bz3Lp1/3/">Testcase</a>
2559+
</div>
24962560

24972561
<!--------------------------------------------------------------------------------->
24982562
<h2 id="rendering">Rendering</h2>

‎css-tables-3/images/table_container.png‎

8.69 KB
Loading

0 commit comments

Comments
 (0)