diff --git a/demo.html b/demo.html
index 68d8300..7c26fc7 100644
--- a/demo.html
+++ b/demo.html
@@ -137,7 +137,7 @@
Using container queries
2 |
1997 |
88% |
- $2.1B |
+ $2.1B Link test |
The Avengers |
diff --git a/table-saw.js b/table-saw.js
index 526863e..828fcfe 100644
--- a/table-saw.js
+++ b/table-saw.js
@@ -12,6 +12,8 @@ class Tablesaw extends HTMLElement {
breakpointBackwardsCompat: "media",
type: "type",
ratio: "ratio",
+ label: "data-tablesaw-label",
+ zeropad: "zero-padding"
};
this.defaults = {
@@ -20,8 +22,8 @@ class Tablesaw extends HTMLElement {
};
this.classes = {
- active: "active",
- };
+ wrap: "tablesaw-wrap"
+ }
this.props = {
ratio: "--table-saw-ratio",
@@ -47,22 +49,19 @@ table-saw.${this._identifier} {
display: block;
margin-bottom: 1em;
}
+ table-saw.${this._identifier} :is(tbody, tfoot) :is(th, td):before {
+ font-weight: bold;
+ content: attr(${this.attrs.label});
+ }
table-saw.${this._identifier} :is(tbody, tfoot) :is(th, td) {
display: grid;
gap: 0 1em;
grid-template-columns: var(--table-saw-ratio, ${this.defaults.ratio});
}
- table-saw.${this._identifier}[zero-padding] :is(tbody, tfoot) :is(th, td) {
+ table-saw.${this._identifier}[${this.attrs.zeropad}] :is(tbody, tfoot) :is(th, td) {
padding-left: 0;
padding-right: 0;
}
-
- table-saw.${this._identifier} .table-saw-label {
- display: none;
- }
- table-saw.${this._identifier} .table-saw-label {
- display: revert !important;
- }
}`;
}
@@ -105,20 +104,19 @@ table-saw.${this._identifier} {
return;
}
- let nodes = [];
- for(let label of labels) {
- let l = document.createElement("b");
- l.classList.add("table-saw-label");
- l.setAttribute("aria-hidden", true);
- l.style.display = "none"; // defensive in case the stylesheet insertion fails
- l.innerText = label;
-
- nodes.push(l);
- }
-
let cells = this.querySelectorAll("tbody td");
for(let cell of cells) {
- cell.prepend(nodes[cell.cellIndex].cloneNode(true));
+ cell.setAttribute(this.attrs.label, labels[cell.cellIndex]);
+
+ // wrap if this cell has child nodes for correct grid alignment
+ if(cell.firstElementChild) {
+ let wrapper = document.createElement("div");
+ wrapper.classList.add(this.classes.wrap);
+ while(cell.firstChild) {
+ wrapper.appendChild(cell.firstChild);
+ }
+ cell.appendChild(wrapper);
+ }
}
}