Implement fixed table layout geometry

This commit is contained in:
SGavrl committed 2026-08-04 08:41:42 +00:00
1 parent 039a9b2ee3
commit 84968aef06
5 files changed
+447 -6

No files matched your search

+10
View File
@@ -268,6 +268,16 @@
"tables": [
{"name": "content-box fixed cell column", "color": "#ffcc99", "width": 208}
],
"fixed-table-layout": [
{"name": "first-row length fixes collapsed first track", "color": "#e03131", "x": 0, "y": 0, "width": 50, "height": 30},
{"name": "unresolved collapsed track receives remainder", "color": "#1971c2", "x": 50, "y": 0, "width": 250, "height": 30},
{"name": "later content cannot resize fixed first track", "color": "#2f9e44", "x": 0, "y": 30, "width": 50, "height": 30},
{"name": "later collapsed row preserves shared tracks", "color": "#f08c00", "x": 50, "y": 30, "width": 250, "height": 30},
{"name": "separate model charges outer spacing before first track", "color": "#862e9c", "x": 14, "y": 104, "width": 50, "height": 30},
{"name": "separate model removes border and all spacing from track space", "color": "#15aabf", "x": 74, "y": 104, "width": 212, "height": 30},
{"name": "later separate row cannot resize first track", "color": "#c2255c", "x": 14, "y": 134, "width": 50, "height": 30},
{"name": "later separate row preserves remaining track", "color": "#fab005", "x": 74, "y": 134, "width": 212, "height": 30}
],
"table-row-geometry": [
{"name": "cell height remains a minimum below block content", "color": "#1971c2", "x": 0, "y": 0, "width": 40, "height": 30},
{"name": "sibling cell stretches to the content-sized row", "color": "#f783ac", "x": 40, "y": 0, "width": 50, "height": 30},
+19
View File
@@ -0,0 +1,19 @@
<!doctype html>
<meta charset="utf-8">
<style>
body { margin: 0 }
table { table-layout: fixed; width: 300px }
td { height: 30px; padding: 0; border: 0 }
.collapsed { border-collapse: collapse }
.separate { margin-top: 40px; border: 4px solid #212529; border-spacing: 10px 0 }
.first { width: 50px }
.long { color: transparent; white-space: nowrap }
</style>
<table class="collapsed">
<tr><td class="first" style="background:#e03131"></td><td style="background:#1971c2"></td></tr>
<tr><td class="long" style="background:#2f9e44">XXXXXXXXXXXXXXXXXXXXXXXX</td><td style="background:#f08c00"></td></tr>
</table>
<table class="separate">
<tr><td class="first" style="background:#862e9c"></td><td style="background:#15aabf"></td></tr>
<tr><td class="long" style="background:#c2255c">XXXXXXXXXXXXXXXXXXXXXXXX</td><td style="background:#fab005"></td></tr>
</table>