CSS表格缩进控制异常：<th>标签无法应用指定indent类样式的排查及代码优化咨询

Hey there! Let's tackle your indent issue first, then go over some code improvements to help you level up your frontend skills.

Core Issue: <th> Indent Styles Not Working As Expected #

The problem comes down to how you've written your CSS selectors. Let's look at your indent rules:

.indent-0 td:first-child, th { padding: 10px; padding-left: 10px; }
.indent-6 td:first-child, th { padding: 10px; padding-left: 3%; }
.indent-12 td:first-child, th { padding: 10px; padding-left: 6%; }
.indent-18 td:first-child, th { padding: 10px; padding-left: 9%; }

The comma here acts as a group selector, which means you're actually targeting two separate things for each rule:

1. The first <td> inside an element with the .indent-* class
2. All <th> tags on the entire page (regardless of their own .indent-* class)

Since CSS applies later rules over earlier ones when specificity is equal, the last rule (indent-18) overrides all <th> elements to use 9% left padding. When you delete that rule, the next-last one (indent-12) takes over instead.

Fix for the Indent Issue

Update your selectors to only target <th> elements that are inside (or have) the .indent-* class. Here's the corrected CSS:

/* 基于Excel缩进值，为表格设置0英寸、6英寸、12英寸、18英寸的嵌套缩进 */
.indent-0 td:first-child, .indent-0 th { padding: 10px; padding-left: 10px; }
.indent-6 td:first-child, .indent-6 th { padding: 10px; padding-left: 3%; }
.indent-12 td:first-child, .indent-12 th { padding: 10px; padding-left: 6%; }
.indent-18 td:first-child, .indent-18 th { padding: 10px; padding-left: 9%; }

Also, fix your HTML structure: <th> elements must be wrapped inside <tr> tags (your current code has some standalone <th>s which are invalid HTML). For example:

<!-- Bad: standalone <th> -->
<th class="big-header indent-0">Manufacture, Assembly, and Delivery</th>

<!-- Good: wrapped in <tr> -->
<tr>
  <th class="big-header indent-0" colspan="3">Manufacture, Assembly, and Delivery</th>
</tr>

Adding colspan="3" ensures the header spans all three columns of your table, preventing layout breaks.

Code Review & Optimization Tips #

You're off to a great start as a frontend learner! Here are some best practices to refine your code:

1. HTML Structure Best Practices

• Use full table semantics: Wrap your table headers in <thead> and data rows in <tbody> — this is standard, improves accessibility, and makes styling easier. Example:

  <table>
    <thead>
      <tr>
        <th class="table-header text-center" colspan="3">Model Inputs, Internal Combustion Engine</th>
      </tr>
    </thead>
    <tbody>
      <!-- All data rows and group headers go here -->
    </tbody>
  </table>
  

• Add <label>s to inputs: This improves accessibility (screen readers will associate labels with inputs, and users can click labels to focus the input):

  <tr class="indent-0">
    <td><label for="G18_Car">Vehicle Life</label></td>
    <td><input id="G18_Car" name="G18_Car" value="{{data['G18_Car']}}"></td>
    <td class="units">Years</td>
  </tr>
  

• Fix duplicate name attributes: Your EV table uses the same name values as the ICE table (e.g., G18_Car). When submitting the form, only the last value will be sent. Rename them to unique values like G18_EV.

2. CSS Optimization

• Eliminate duplicate code: All your indent rules include padding: 10px; — extract this to a shared rule to keep your code DRY (Don't Repeat Yourself):

  /* Shared padding for all indented cells */
  .indent-0 td:first-child, .indent-0 th,
  .indent-6 td:first-child, .indent-6 th,
  .indent-12 td:first-child, .indent-12 th,
  .indent-18 td:first-child, .indent-18 th {
    padding: 10px;
  }
  /* Unique left padding for each indent level */
  .indent-0 td:first-child, .indent-0 th { padding-left: 10px; }
  .indent-6 td:first-child, .indent-6 th { padding-left: 3%; }
  .indent-12 td:first-child, .indent-12 th { padding-left: 6%; }
  .indent-18 td:first-child, .indent-18 th { padding-left: 9%; }
  

• Leverage Bootstrap classes: You're already using Bootstrap, so reuse its built-in classes instead of writing custom CSS where possible:
  • Replace your .table-header's text-align: center with Bootstrap's text-center class
  • Style your submit button with btn btn-primary for a polished look
  • Add table-responsive around your tables to enable horizontal scrolling on small screens

3. Small Fixes & Polish

• Fix typos: You have a spelling error: Distrubition should be Distribution in one of your headers.
• Consistent class naming: You use child-row in some places but not others — keep class names consistent to avoid confusion.

内容的提问来源于stack exchange，提问作者pdsatter