From 6dd45485810ea6ecfc79d08cb4237c624cf5da86 Mon Sep 17 00:00:00 2001 From: Christopher-O Date: Mon, 31 Jul 2023 14:32:09 -0600 Subject: [PATCH] Update vertical-table.html adding various options. --- templates/vertical-table.html | 24 ++++++++++++++++-------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/templates/vertical-table.html b/templates/vertical-table.html index be0b35d8c..f53ac9047 100644 --- a/templates/vertical-table.html +++ b/templates/vertical-table.html @@ -21,8 +21,8 @@ - - + + @@ -109,12 +109,19 @@ } .table-vertical-header td::before { display: block; + font-weight: 600; + color: #333; + font-size: 22px; + font-family: "Noto Sans", sans-serif +} +.table-vertical-header.header-muted td::before { font-weight: 200; - content: attr(data-header); color: #6f6f6f; font-size: 20px; - font-family: "Noto Sans", sans-serif } +.table-vertical-header.no-script td::before { + content: attr(data-header); + } .table-vertical-header.strong td::before { font-weight: bold; @@ -125,8 +132,8 @@ @media (min-width:992px) { .table-vertical-header td::before { display: inline-block; - margin-left: -165px; - width: 160px; + margin-left: -205px; + width: 200px; float: left; padding-right: 15px; text-align: right; @@ -279,7 +286,7 @@

Vertical table design with headers (non-ajax/non-script)

Not suggested as takes more work to code, fallback due to scripts turned off is minimal. Uses .table-vertical-header to activate, and data-header attribute with the name of the header added to each <td> cell.

- +
@@ -521,9 +528,10 @@

Vertical data table design with headers (ajax/script)

return $th.eq($(this).index()).text(); }); } - +if (!$(this).hasClass(".no-script")) { table.each(heading); table.on('wb-updated.wb-tables', heading); +}; });
Caption here