Skip to content

Instantly share code, notes, and snippets.

@atotic

atotic/TablesNG_demo.html

Created January 19, 2021 22:33
Show Gist options
  • Save atotic/dd883248f353a64a5cb0fb5570db3f4e to your computer and use it in GitHub Desktop.
Save atotic/dd883248f353a64a5cb0fb5570db3f4e to your computer and use it in GitHub Desktop.
Download ZIP
Demo for Chrome's TableNG project
Raw
TablesNG_demo.html
<!doctype html>
<title>NGTable layout examples</title>
<style>
h3 {
font-size: medium;
border-top: 1px solid gray;
padding-top: 6px;
}
table {
border: 1px solid black;
}
td {
padding: 0;
}
.fifty td {
width: 50px;
height: 50px;
border: 2px solid green;
}
#large_cell_border {
border-collapse: collapse;
}
#large_cell_border td {
width: 50px;
height:50px;
border: 2px solid black;
/*background: none;*/
}
.border_td td {
border: 2px solid green;
width: 50px;
height: 50px;
}
.vertical td {
width: 50px;
height: 50px;
background: #ddd;
padding: 4px;
}
.animated {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d7/Muybridge_horse_gallop_animated_2.gif);
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: green;
}
.collapse_example td {
width:50px;
height: 50px;
border:2px solid green;
}
.collapse_example:hover #collapse_me {
visibility: collapse;
}
#absolute_container td {
}
</style>
<h3>Subpixel geometry: TablesNG supports fractional table part widths.</h3>
<table id="subpixel" style="width:110px">
<caption>cell widths:</caption>
<td>x</td>
<td>x</td>
<td>x</td>
</table>
<h3>Borders of &lt;TD&gt;s that span multiple rows/columns</h3>
<table id="large_cell_border">
<colgroup style="border:6px solid blue;background:rgba(0,0,255,0.5);"></colgroup>
<tr>
<td rowspan=4>col border 6px</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan=2 colspan=2 style="border:4px solid green; background: rgba(0,255,0, 0.5);">cell border 4px</td>
<td style="border: 6px solid yellow;background:rgba(255,255, 0, 0.5)">cell border 6px</td>
</tr>
<td></td>
<tr>
<td colspan=3 style="border:6px solid orange;background:rgba(255,165,0,0.5)">cell border 6px</td>
</tr>
</table>
<h3>Background painting of &lt;TD&gt;s that span multiple rows/columns</h3>
<table class="border_td" style="border-collapse:collapse">
<colgroup><col class="animated"></colgroup>
<tbody>
<tr>
<td>0.0</td>
<td>0,1</td>
<td>0,2</td>
</tr>
<tr>
<td colspan=2 style="font-weight:bold; text-shadow: 0 0 2px white;">1,0 wide cell</td>
<td>1,2</td>
</tr>
<tr>
<td>2,0</td>
<td>2,1</td>
<td>2,2</td>
</tr>
</tbody>
</table>
<h3>&lt;TD&gt; orthogonal writing mode support</h3>
<table class="vertical">
<tr>
<td>cells can</td>
<td>now support</td>
<td>mixed writing modes</td>
</tr>
<tr >
<td>this cell is horizontal</td>
<td style="writing-mode:vertical-rl">this one is vertical-rl</td>
<td style="writing-mode:vertical-lr">this one is vertical-lr</td>
</tr>
</table>
<h3>&lt;COL/COLGROUP&gt; visibility:collapse</h3>
<p>Hovering over table will make 2nd column collapse if supported. Firefox is buggy when collapsing columns on :hover</p>
<table class="collapse_example" style="border-collapse:collapse;display:inline-table">
<caption>collapse without hover</caption>
<col>
<col style="visibility:collapse">
<col>
<tr>
<td>0,0</td>
<td>0,1 I will collapse</td>
<td>0.2</td>
</tr>
<tr>
<td colspan="3" style="vertical-align:top;overflow-y:auto">I span 3 columns and am too large to fit so we use overflow-y:auto</td>
</tr>
</table>
<table class="collapse_example" style="margin-left:24px;border-collapse:collapse; display:inline-table">
<caption>collapse with :hover</caption>
<col>
<col id="collapse_me">
<tr>
<td>0,0</td>
<td>0,1 I will collapse</td>
<td>0.2</td>
</tr>
<tr>
<td colspan="3" style="vertical-align:top;overflow-y:auto">I span 3 columns and am too large to fit so we use overflow-y:auto</td>
</tr>
</table>
<h3>Sections/rows can have position that is not static.</h3>
<p>Top row has position:relative, top:-10px, left:20px, and there is an absolutely positioned element inside it.</p>
<div style="position:relative">
<table class="fifty" id="absolute_container">
<tbody>
<tr style="position:relative;top:-10px;left:20px;background:rgba(0,255,0,0.3);">
<td>0,0</td>
<td>0,1</td>
<td>0,2<div style="position:absolute;right:0px;top:0px;background: yellow;">absolute</div></td>
</tr>
<tr>
<td>0,0</td>
<td>0,1</td>
<td>0,2</td>
</tr>
</tbody>
</table>
</div>
<h3>position:sticky row example</h3>
<p>You can use position:sticky to make header rows visibile while scrolling.</p>
incorrect
<div style="width:100px;height:100px;border:1px solid black;overflow:auto">
<table style="border:1px solid gray">
<tbody style="position:relative">
<tr style="position:sticky;top:1px;left:0;background:gray;color:white"><th>Header</th></tr>
<tr><td>One</td></tr>
<tr><td>Two</td></tr>
<tr><td>Three</td></tr>
<tr><td>Four</td></tr>
<tr><td>Five</td></tr>
<tr style="position:sticky;top:1px;left:0;background:gray;color:white"><th>Another head</th></tr>
<tr><td>Seven</td></tr>
<tr><td>Eight</td></tr>
<tr><td>Nine</td></tr>
<tr><td>Ten</td></tr>
</tbody>
</table>
</div>
<h3>&lt;TABLE&gt; box-sizing</h3>
<p>width of these tables should be different (by width of table's border)</p>
<table id="box_sizing" style="box-sizing:border-box;width:100px;height:100px;border:10px solid gray;width: 200px;">
<caption>border-box</caption>
</table>
<table id="box_sizing" style="box-sizing:content-box;width:100px;height:100px;border:10px solid gray;width: 200px;">
<caption>content-box</caption>
</table>
<script>
// subpixel
let widths = " "
for (el of Array.from(document.querySelectorAll("#subpixel td"))) {
widths += el.getBoundingClientRect().width + "px ";
}
document.querySelector("#subpixel caption").innerText += widths;
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment