如何在html表（1.1,1.2）上添加嵌套编号？

Question

我正在尝试在一个表上添加嵌套编号，其中可以动态添加n个tr个动态添加tr。

＆＃13;

＆＃13;

.ssection {
  background-color: lightgrey;
  border-bottom: thin dotted black;
}
.sLot {
  padding-left: 30px;
  background-color: lightgrey;
}
.sLotDesc {
  padding-left: 40px;
  background-color: lightgrey;
}
.sLotExtendedPrc {
  background-color: lightgrey;
  width: 100%;
  text-align: right;
}
.sLotSavingPrc {
  background-color: lightgrey;
  width: 100%;
  text-align: right;
}
.sLotLineItem {
  background-color: lightyellow;
  padding-left: 90px;
}
.sLotLineItemPrice,
.sLotLineItemQuantity,
.sLotLineItemExtendedPrice,
.sLotLineItemSaving {
  background-color: lightyellow;
  width: 100%;
  text-align: right;
}

＆＃13;

   <table style="width:100%;">

<tr class="ssection">
    <td colspan="4">Introduction</td>
    <tr class="sLot">
    <td class="sLot" colspan="4">Laptops and Desktops</td>
      <tr class="sLotDesc">
    <td class="sLotDesc"  colspan="4">Laptop Description</td>
</tr>
</tr>
<tr >
    <td></td>
    <td>Initial</td>
    <td>Historic</td>
    <td>Reserve</td>
</tr>
<tr class="ssection">
    <td colspan="4">Pricing</td>
    
</tr>
<tr class="sLot">
    <td class="sLot" colspan="4">Lot tile</td>
      
</tr>
<tr class="sLotDesc">
    <td class="sLotDesc"  colspan="4">Lot Description</td>
</tr>
<tr class="sLotExtendedPrc">
    
    <td class="sLotExtendedPrc">Extended Prc</td>
     <td class="sLotExtendedPrcInitialVal">110</td>
    <td class="sLotExtendedPrcHistoricVal">110</td>
    <td class="sLotExtendedPrcReserveVal">110</td>
</tr>
<tr class="sLotSavingPrc">
    <td class="sLotSavingPrc">Saving Prc</td>
    <td class="sLotSavingPrcInitialVal">120</td>
    <td class="sLotSavingPrcHistoricVal">120</td>
    <td class="sLotSavingPrcReserveVal">120</td>
</tr>

 <tr class="sLotLineItem">
    <td class="sLotLineItem">Lineitem 1</td>
</tr>
 <tr class="sLotLineItemPrice">
    <td class="sLotLineItemPrice">Price</td>
     <td class="sLotLineItemPriceInititalVal">130</td>
     <td class="sLotLineItemPriceHistoricVal">130</td>
     <td class="sLotLineItemPriceReserveVal">130</td>
</tr>
 <tr class="sLotLineItemQuantity">
    <td class="sLotLineItemQuantity">Quantity</td>
     <td class="sLotLineItemQuantityInitialVal">140</td>
     <td class="sLotLineItemQuantityHistoricVal">140</td>
     <td class="sLotLineItemQuantityReserveVal">140</td>
</tr>
<tr class="sLotLineItemExtendedPrice">
    <td class="sLotLineItemExtendedPrice">Extended Price</td>
    <td class="sLotLineItemExtendedPriceInitialVal">150</td>
    <td class="sLotLineItemExtendedPriceHistoricVal">150</td>
    <td class="sLotLineItemExtendedPriceReserveVal">150</td>
</tr>
<tr class="sLotLineItemSaving">
    <td class="sLotLineItemSaving">Saving</td>
    <td class="sLotLineItemSavingInitialVal">160</td>
    <td class="sLotLineItemSavingHistoricVal">160</td>
    <td class="sLotLineItemSavingReserveVal">160</td>
</tr>
<table>

＆＃13;

＆＃13;

＆＃13;

期望的结果

部分是外部单位。部分可以包含任意数量的批次，每个批次又可以包含许多线条。