diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index ae43714..cf2cde3 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -29,6 +29,8 @@
   --color-dark-red: #b21237;
   --color-red: #ff1f5b;
 
+  --depth: 0;
+
   --z-index-flashes: 100;
   --z-index-table-row-outline: 10;
 }
@@ -363,24 +365,9 @@ table.items th,
 table.items td {
   padding-inline: 1em 0;
 }
-table.items td:has(input, textarea) {
-  padding-inline-start: calc(0.6em - 0.9px);
-}
-table.items th:last-child {
-  padding-inline-end: 0.4em;
-}
-table.items td:last-child {
-  padding-inline-end: 0.1em;
-}
-table.items td {
-  border-top: solid 1px var(--color-border-gray);
-  height: 2.4em;
-  padding-block: 0.1em;
-}
 /* For <a> to fill <td> completely, we use an ::after pseudoelement. */
 table.items td.link {
   padding: 0;
-  padding-inline-start: calc(1em + var(--depth) * 0.8em);
   position: relative;
 }
 table.items td.link a {
@@ -392,11 +379,25 @@ table.items td.link a::after {
   inset: 0;
   position: absolute;
 }
-table.items td.subunit {
-  padding-inline-start: 1.8em;
+table.items td:first-child {
+  padding-inline-start: calc(1em + var(--depth) * 0.8em);
 }
-table.items td.subunit:has(input, textarea) {
-  padding-inline-start: calc(1.4em - 1px);
+table.items td:has(input, textarea) {
+  padding-inline-start: calc(0.6em - 0.9px);
+}
+table.items td:first-child:has(input, textarea) {
+  padding-inline-start: calc(0.6em + var(--depth) * 0.8em - 0.9px);
+}
+table.items th:last-child {
+  padding-inline-end: 0.4em;
+}
+table.items td:last-child {
+  padding-inline-end: 0.1em;
+}
+table.items td {
+  border-top: solid 1px var(--color-border-gray);
+  height: 2.4em;
+  padding-block: 0.1em;
 }
 table.items td.actions {
   align-items: center;
diff --git a/app/views/default/units/_unit.html.erb b/app/views/default/units/_unit.html.erb
index bce8a73..dadfc99 100644
--- a/app/views/default/units/_unit.html.erb
+++ b/app/views/default/units/_unit.html.erb
@@ -1,5 +1,6 @@
 <%= tag.tr do %>
-  <td class="<%= class_names({subunit: unit.base_id?, grayed: unit.default?}) %>">
+  <td class="<%= class_names({grayed: unit.default?}) %>"
+      style="--depth:<%= unit.base_id? ? 1 : 0 %>">
     <%= unit %>
   </td>
 
diff --git a/app/views/quantities/_form.html.erb b/app/views/quantities/_form.html.erb
index a08128a..0e5a39d 100644
--- a/app/views/quantities/_form.html.erb
+++ b/app/views/quantities/_form.html.erb
@@ -2,7 +2,7 @@
   <%- tag.tr id: row, class: "form", onkeydown: "processKey(event)",
     data: {link: link, form: form_tag, hidden_row: hidden_row} do %>
 
-    <td class="<%= class_names({subquantity: @quantity.parent}) %>">
+    <td style="--depth:<%= @quantity.depth %>">
       <%= form.text_field :name, required: true, autofocus: true, size: 20 %>
     </td>
     <td>
diff --git a/app/views/units/_form.html.erb b/app/views/units/_form.html.erb
index 82c08cb..7fc73af 100644
--- a/app/views/units/_form.html.erb
+++ b/app/views/units/_form.html.erb
@@ -2,7 +2,7 @@
   <%- tag.tr id: row, class: "form", onkeydown: "processKey(event)",
     data: {link: link, form: form_tag, hidden_row: hidden_row} do %>
 
-    <td class="<%= class_names({subunit: @unit.base_id?}) %>">
+    <td style="--depth:<%= @unit.base_id? ? 1 : 0 %>">
       <%= form.text_field :symbol, required: true, autofocus: true, size: 12 %>
     </td>
     <td>
diff --git a/app/views/units/_unit.html.erb b/app/views/units/_unit.html.erb
index f3bc986..f332fdc 100644
--- a/app/views/units/_unit.html.erb
+++ b/app/views/units/_unit.html.erb
@@ -6,7 +6,7 @@
                   drop_id: dom_id(unit.base || unit),
                   drop_id_param: "unit[base_id]"} do %>
 
-  <td class="<%= class_names('link', {subunit: unit.base}) %>">
+  <td class="link" style="--depth:<%= unit.base_id? ? 1 : 0 %>">
     <%= link_to unit, edit_unit_path(unit), onclick: 'this.blur();', data: {turbo_stream: true} %>
   </td>
   <td><%= unit.description %></td>