Table indentation broken - html

Question

I have table indentations controlled by padding. I set class="indent-(number_inches)" to choose indentation level. I am running into an issue where the <th> tags always indent based on the indent-18 class instead of the assigned class.
Whenever I remove the .indent-18 class from my CSS it takes on the properties of .indent-12 class instead.
Replacing th with th:first-child in css does not work
I am also open to any other, non-related critique on my code. I am still learning so teaching me the proper way would help a lot
/* TABLE CLASSES*/
.units {
text-align: left;
}
.table-header {
font-size: 20px;
text-align: center;
border-bottom: 2px solid black;
}
.big-header {
font-size: 16px;
}
.small-header {
font-size: 16px;
}
/*
Nest table based on these values
Indent 0" 6" 12" or 18", based off of excel indentations
*/
.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%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<!-- USER FORM STARTS-->
<form action="/update_car_data/" method="post">
<div class="row">
<!-- TABLE 1 -->
<div class="col-md-6 col-sm-12 col-xs-12">
<table>
<thead>
<th class="table-header" colspan="3">Model Inputs, Internal Combustion Engine</th>
</thead>
<!--
Structure of table row:
Title | value | units
-->
<tr class="indent-0">
<td>Vehicle Life</td>
<td><input name="G18_Car" value="{{data['G18_Car']}}"></td>
<td class="units">Years</td>
</tr>
<tr class="indent-0">
<td>Distance Traveled Per Year After Purchase</td>
<td><input name="G19_Car" value="{{data['G19_Car']}}"></td>
<td class="units">Miles</td>
</tr>
<!--Generation, Assembly, and Delivery-->
<th class="big-header indent-0">Manufacture, Assembly, and Delivery</th>
<tr class="indent-6">
<td>Manufacture Assembly - GHG Emissions</td>
<td><input name="G22_Car" value="{{data['G22_Car']}}"></td>
<td class="units">MT CO2e</td>
</tr>
<tr class="indent-6">
<td>Delivery - GHG Emissions</td>
<td><input name="G23_Car" value="{{data['G23_Car']}}"></td>
<td class="units">MT CO2e</td>
</tr>
<!--Operation and Disposal-->
<tr>
<th class="big-header indent-0">Operation and Disposal</th>
</tr>
<!--Tailpipe emissions-->
<tr>
<th class="small-header indent-6">Tailpipe Emissions</th>
</tr>
<tr class="indent-12">
<td>Emissions Per Gallon of Gasoline</td>
<td><input name="G28_Car" value="{{data['G28_Car']}}"></td>
<td class="units">kg CO2e/gal</td>
</tr>
<tr class="indent-12">
<td>Fuel Efficiency</td>
<td><input name="G29_Car" value="{{data['G29_Car']}}"></td>
<td class="units">Miles/gal</td>
</tr>
<!--Fuel Cycle-->
<tr>
<th class="small-header indent-6">Fuel Cycle</th>
</tr>
<tr>
<th class="small-header indent-12">Ethanol Fuel Cycle</th>
</tr>
<tr class="indent-18">
<td>Volume % of Ethanol</td>
<td><input name="G23_Car" value="{{data['G32_Car']}}"></td>
<td class="units">%</td>
</tr>
<tr class="indent-18">
<td>Ethanol Fuel Cycle Basis</td>
<td><input name="G44_Car" value="{{data['G44_Car']}}"></td>
<td class="units">kg CO2e/gal</td>
</tr>
<tr>
<th class="small-header indent-12">Petroleum (Gasoline) Fuel Cycle</th>
</tr>
<tr class="indent-18">
<td>Upstream (Well to Refining Emissions)</td>
<td><input name="G33_Car" value="{{data['G33_Car']}}"></td>
<td class="units">MT CO2e/BBL-crude</td>
</tr>
<!--Refining-->
<tr>
<th class="small-header indent-18">Refining</th>
</tr>
<tr class="indent-18">
<td>Processing (Volumetric) Gain</td>
<td><input name="G36_Car" value="{{data['G36_Car']}}"></td>
<td class="units">%</td>
</tr>
<tr class="indent-18">
<td>Refining GHG Emissions Basis</td>
<td><input name="G37_Car" value="{{data['G37_Car']}}"></td>
<td class="units">MT CO2e/BBL-crude</td>
</tr>
<!--Distrubition (Refining to sales)-->
<tr>
<th class="small-header indent-12">Distrubition (Refining to Sales)</th>
</tr>
<tr class="child-row indent-18">
<td>Evaporative Loss</td>
<td><input name="G40_Car" value="{{data['G40_Car']}}"></td>
<td class="units">%</td>
</tr>
<tr class="indent-18">
<td>Carbon Intensity (GWP 100) of Motor Gasoline</td>
<td><input name="G41_Car" value="{{data['G41_Car']}}"></td>
<td class="units">MT CO2e/MT</td>
</tr>
<tr class="indent-18">
<td>Tank-Truck Shipment to Sales Centers</td>
<td><input name="G42_Car" value="{{data['G42_Car']}}"></td>
<td class="units">MT CO2e/year</td>
</tr>
<tr class="indent-0">
<td>Disposal -GHG Emissions</td>
<td><input name="G46_Car" value="{{data['G46_Car']}}"></td>
<td class="units">MT CO2e</td>
</tr>
</table>
</div>
<!-- TABLE 2 -->
<div class="col-md-6 col-sm-12 col-xs-12">
<table>
<tr>
<th class="table-header" colspan="3">Model Inputs, EV (Electric Vehicle)</th>
</tr>
<tr class="child-row">
<td>Vehicle Life</td>
<td><input name="G18_Car" value="{{data['G18_Car']}}"></td>
<td>Years</td>
</tr>
<tr class="child-row">
<td>Delivery -GHG emissions</td>
<td><input name="G19_Car" value="{{data['G19_Car']}}"></td>
<td>Miles</td>
</tr>
</table>
</div>
<br>
<div class="col-12">
<button name="updateBtn" type="submit">Update</button>
</div>
</div>
</form>

Answer 1

You should change the CSS like this :
.indent-0 td:first-child, th.indent-0 {
padding: 10px;
padding-left: 10px;
}
.indent-6 td:first-child, th.indent-6 {
padding: 10px;
padding-left: 3%;
}
.indent-12 td:first-child, th.indent-12 {
padding: 10px;
padding-left: 6%;
}
.indent-18 td:first-child, th.indent-18 {
padding: 10px;
padding-left: 9%;
}
Fiddle