Tweak appearance of leftovers column

[tablify] / src / lib.rs
diff --git a/src/lib.rs b/src/lib.rs

index a7c28198b5faa15056fd274f1b9bd85ea61dd1dc..cbe9ae9a328deb4629b9bef0a57749c1425049c7 100644 (file)
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -23,6 +23,7 @@ const HEADER: &str = r#"<!DOCTYPE html>
      tr.key > th > div { width: 1em; }
      tr.key > th > div > div { width: 5em; transform-origin: bottom left; transform: translateX(1em) rotate(-65deg) }
      td { border: thin solid gray; }
+    td.leftover { text-align: left; border: none; padding-left: .4em; }
      td.yes { border: thin solid gray; background-color: #ddd; }
      /* h/t https://stackoverflow.com/questions/5687035/css-bolding-some-text-without-changing-its-containers-size/46452396#46452396 */
      .highlight { text-shadow: -0.06ex 0 black, 0.06ex 0 black; }
@@ -260,7 +261,7 @@ fn render_row(columns: &[String], row: &mut Row) -> HTML {
          .collect::<HTML>();
      let leftovers = render_all_leftovers(row);
      HTML(format!(
-        "<tr><th id=\"{row_label}\">{row_label}</th>{cells}<td onmouseover=\"highlight('{row_label}')\" onmouseout=\"clear_highlight('{row_label}')\">{leftovers}</td></tr>\n"
+        "<tr><th id=\"{row_label}\">{row_label}</th>{cells}<td class=\"leftover\" onmouseover=\"highlight('{row_label}')\" onmouseout=\"clear_highlight('{row_label}')\">{leftovers}</td></tr>\n"
      ))
  }
  
@@ -623,7 +624,7 @@ mod tests {
                  }
              ),
              HTML::from(
-                r#"<tr><th id="nope">nope</th><td class="" onmouseover="h2('nope','foo')" onmouseout="ch2('nope','foo')"></td><td onmouseover="highlight('nope')" onmouseout="clear_highlight('nope')">bar</td></tr>
+                r#"<tr><th id="nope">nope</th><td class="" onmouseover="h2('nope','foo')" onmouseout="ch2('nope','foo')"></td><td class="leftover" onmouseover="highlight('nope')" onmouseout="clear_highlight('nope')">bar</td></tr>
  "#
              )
          );