[css2][css-tables] Do collapsed tracks also shrink the table wrapper box or only the table grid box? #11408
Comments
|
What Gecko does is: it shrinks the table grid box, but not the table wrapper box. That's why margins are unaffected, or here the table doesn't fit next to the float: <!DOCTYPE html>
<div style="border: solid; width: 150px">
<div style="float: left; width: 75px; height: 50px; background: magenta"></div>
<table style="width: 100px; height: 50px; border-spacing: 0; background: cyan">
<col style="visibility: collapse"></col>
<td></td>
<td></td>
</table>
</div>
That the table wrapper doesn't shrink can be observed with outline. And it's possible to align the table grid box to the right of the table wrapper box with <!DOCTYPE html>
<div style="border: 6px solid; width: 150px">
<table style="width: 100px; height: 50px; border-spacing: 0; background: cyan; outline: solid magenta; direction: ltr;">
<col style="visibility: collapse"></col>
<td></td><td></td>
</table>
<table style="width: 100px; height: 50px; border-spacing: 0; background: cyan; outline: solid magenta; direction: rtl;">
<col style="visibility: collapse"></col>
<td></td><td></td>
</table>
</div>
I think both can be reasonable, but since Gecko allows the wrapper to be bigger than the grid (it can also happen with a caption, but Blink & WebKit never allow it), it should be possible to customize the alignment with |
Loirooriol
changed the title
visibility: collapse?
|
Though Gecko is inconsistent with the block axis, where the wrapper doesn't stay with the same size as before collapsing a row: <!DOCTYPE html>
<div style="border: 6px solid; width: 150px">
<table style="width: 100px; height: 100px; border-spacing: 0; background: cyan; outline: solid magenta">
<col style="visibility: collapse"></col>
<tr style="visibility: collapse"><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
</div>
|
|
Note that Blink doesn't shrink the wrapper beyond the size of the caption. Since it doesn't allow the wrapper to be bigger than the grid, it seems to add trailing tracks. <!DOCTYPE html>
<table style="width: 100px; height: 50px; border-spacing: 0; background: cyan; outline: solid magenta; border: solid">
<caption style="width: 75px; height: 25px; background: orange"></caption>
<col style="visibility: collapse"></col>
<td></td><td style="background: yellow"></td>
</table>
|
|
OK, so things get even weirder:
Code<!DOCTYPE html>
<style>
.container { display: inline-flex; padding: 5px; border: 5px solid; vertical-align: top }
table { outline: 5px solid magenta; border: 5px solid cyan; width: 100px; height: 100px }
col + col, tr + tr { visibility: collapse }
td { background: yellow }
</style>
<div class="container" style="display: inline-flex; flex-direction: row">
<table>
<col></col><col></col>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
</div>
<div class="container" style="display: inline-flex; flex-direction: column">
<table>
<col></col><col></col>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
</div>
<div class="container" style="display: inline-grid">
<table>
<col></col><col></col>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
</div>
<div class="container" style="display: inline-block">
<table>
<col></col><col></col>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
</div>
<div class="container" style="position: relative">
<table style="position: absolute">
<col></col><col></col>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
</div> |
https://drafts.csswg.org/css2/#blockwidth
https://drafts.csswg.org/css2/#dynamic-effects
automargins usingwidth: 100px, so they become 25px each. Then the table ends up being only 50px, but the margins stay as 25px.automargins with the final width, so they become 50px each.visibility: collapse.Blink seems better I guess.
The text was updated successfully, but these errors were encountered: