Table

Documentation and examples for opt-in styling of tables.

Product SNX SKU# Unit MSRP (USD) Reseller Unit Price (USD) Quantity Warehouse Reseller Ext. Unit Price (USD)
Azure Active Directory Premium P1 4126746 E75DF1927F27 MST-E75DF1927F27 6.00 5.28
0.00
Azure Active Directory Premium P2 4126746 E75DF1927F27 MST-E75DF1927F27 6.00 5.28
0.00
Azure Information Protection Premium P1 4126746 E75DF1927F27 MST-E75DF1927F27 6.00 5.28
0.00
Azure Advanced Threat Protect for Users 4126746 E75DF1927F27 MST-E75DF1927F27 6.00 5.28
0.00
        
<div class="row">
  <div class="col-xl-12 col-lg-12">
     <div class="right-navtab">
        <div class="tab-content" id="v-pills-tabContent">
           <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel"
              aria-labelledby="v-pills-home-tab">
              <div class="ad-ip-table table-responsive bundle-config-table list-view-tile summary-tab-table">
                 <table class="table position-relative custom-table">
                    <thead class="thead-light">
                       <tr>
                          <th> </th>
                          <th>
                             <div class="column-expansion">
                                <span></span>
                                <a href="javascript:void(0);">
                                   <i class="icon-expand-col expandCols"
                                data-toggle="tooltip" data-placement="top" title=""
                                data-original-title="Expand Columns"></i>
                             </a>
                             </div> 
                          </th>
                          <th></th>
                          <th></th>
                          <th></th>
                          <th></th>
                          <th></th>
                       </tr>
                       <tr class="main-header">
                          <th scope="col" width="17%">Product </th>
                 <th scope="col" width="9%" class="sku-section-collapsed text-center">SNX SKU#
                     
              </th>
              <th scope="col" width="9%" class="sku-section-expanded"
                 style="display: none;">MFG Part# </th>
              <th scope="col" width="10%" style="display: none;" class="sku-last-col">SNX Part#</th>
                          <th scope="col" width="8%" class="text-right">Unit MSRP <span
                             class="price-denom">(USD)</span></th>
                          <th scope="col" width="9%" class="text-right">Reseller Unit Price <span
                             class="price-denom">(USD)</span></th>
                          <th scope="col" width="13%" class="text-center">Quantity</th>
                          <th scope="col" width="12%" class="text-left">Warehouse</th>
                          <th scope="col" width="8%" class="text-right">Reseller Ext. Unit Price <span
                             class="price-denom">(USD)</span></th>
                       </tr>
                    </thead>
                    <tbody>
                       <tr class="prod-row">
                          <td><a href="" class="text-long" data-original-title="">Azure Active Directory
                             Premium P1</a>
                          </td>
                          <td class="text-center">4126746 </td>
                          <td style="display: none;"><span>E75DF1927F27</span> </td>
                          <td style="display: none;"><span>MST-E75DF1927F27 </span> </td>
                          <td class="text-right">6.00 </td>
                          <td class="text-right   resellerDisc">
                             <span class="original-value">5.28 </span>
                             <span class="applied-discount-value" style="display: none;">
                                <!-- <span class="line-through">5.28 </span>  -->
                                <span class="priceValue"><span class="redTxt">4.00</span></span>
                             </span>
                          </td>
                          <td class="text-center">
                             <div class="input-group snippet-group position-relative">
                                <span class="input-group-btn">
                                <button type="button" class="btn btn-default btn-number disabled"
                                   data-type="minus" data-field="quant[1]" data-toggle="tooltip"
                                   data-placement="top" title=""
                                   data-original-title="Delete Quantity">
                                <img src="images/minus-icon.png">
                                </button>
                                </span>
                                <input type="text" name="quant[1]" class="form-control input-number"
                                   value="00">
                                <span class="input-group-btn">
                                <button type="button" class="btn btn-default btn-number"
                                   data-type="plus" data-field="quant[1]" data-toggle="tooltip"
                                   data-placement="top" title="" data-original-title="Add Quantity">
                                <i class="icon-plus"></i>
                                </button>
                                </span>
                               
                             </div>
                          </td>
                          <td>
                             <div class="search-input-col">
                                <div class="custom-dropdown warehouse-menu dropdown cards-custom-dropdown">
                                   <button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                   <i class="icon-arrow-bottom"></i>
                                   <span class="selected-value">Select</span>
                                   </button>
                                   <div class="dropdown-menu active-menu">
                                      <div class="warehouse-list">
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Select</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Columbus (3)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Miami, FL (DFL) (4)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Monroe, NJ (DNJ) (2)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Romeoville, IL (DCH) (0)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Garland, TX (DDA) (0)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Southaven, MS (DTN) (2)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Southaven, MS (DTNL) (3)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Tracy, CA (DFR) (3)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Chino, CA (DON) (6)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Vendor Direct Ship (DDS) (3)</span></a>
                                   </div>
                                   </div>
                                </div>
                             </div>
                          </td>
                          <td class="text-right">0.00</td>
                       </tr>
                       <tr class="addOnRow addon-shadow" style="display: none;">
                          <td colspan="9" class="p-0 border-0">
                             <div class="add-on-section toggle-box closed">
                                <div class="mb-2">
                                   <a href="javascript:void(0)" class="add-ons toggleAddOn active">
                                   <i class="icon-arrow-bottom" data-toggle="tooltip"
                                      data-placement="top" title=""
                                      data-original-title="Expand"></i> <span>Add Ons (2)</span>
                                   </a>
                                   <span class="border-dash"></span>
                                </div>
                                <div class="addOnTable" style="display: none;">
                                   <table class="table sub-prod-table" style="display: none;">
                                      <tbody>
                                         <tr>
                                            <td width="40%"><a href="">MST Stream P2 for O365 Add-On</a>
                                            </td>
                                            <td width="11%" class="text-right">24.40</td>
                                            <td width="15%" class="text-center">
                                               <div class="input-group snippet-group">
                                                  <span class="input-group-btn">
                                                  <button type="button"
                                                     class="btn btn-default btn-number"
                                                     data-type="minus" data-field="quant[1]"
                                                     data-toggle="tooltip" data-placement="top"
                                                     title="" data-original-title="Delete Quantity">
                                                  <img src="images/minus-icon.png">
                                                  </button>
                                                  </span>
                                                  <input type="text" name="quant[1]"
                                                     class="form-control input-number" value="1">
                                                  <span class="input-group-btn">
                                                  <button type="button"
                                                     class="btn btn-default btn-number"
                                                     data-type="plus" data-field="quant[1]"
                                                     data-toggle="tooltip" data-placement="top"
                                                     title="" data-original-title="Add Quantity">
                                                  <i class="icon-plus"></i>
                                                  </button>
                                                  </span>
                                               </div>
                                            </td>
                                            <td width="10%" class="text-right">24.40</td>
                                         </tr>
                                         <tr>
                                            <td width="40%"><a href="">Office 365 Extra File Storage</a>
                                            </td>
                                            <td width="11%" class="text-right">10.08</td>
                                            <td width="15%" class="text-center">
                                               <div class="input-group snippet-group">
                                                  <span class="input-group-btn">
                                                  <button type="button"
                                                     class="btn btn-default btn-number"
                                                     data-type="minus" data-field="quant[1]"
                                                     data-toggle="tooltip" data-placement="top"
                                                     title="" data-original-title="Delete Quantity">
                                                  <img src="images/minus-icon.png">
                                                  </button>
                                                  </span>
                                                  <input type="text" name="quant[1]"
                                                     class="form-control input-number" value="5">
                                                  <span class="input-group-btn">
                                                  <button type="button"
                                                     class="btn btn-default btn-number"
                                                     data-type="plus" data-field="quant[1]"
                                                     data-toggle="tooltip" data-placement="top"
                                                     title="" data-original-title="Add Quantity">
                                                  <i class="icon-plus"></i>
                                                  </button>
                                                  </span>
                                               </div>
                                            </td>
                                            <td width="10%" class="text-right">50.40</td>
                                         </tr>
                                      </tbody>
                                   </table>
                                   <div class="row add-on-tiles data col-custom-padding" tabindex="6"
                                      style="overflow-y: hidden; outline: none;">
                                      <div class="col-3 sub-add-on">
                                         <div class="product-tile new-arrivals">
                                            <div class="tiles-icon">
                                               <img src="images/microsoft-icon.png">
                                               <h6 class="arrival-heading">Office 365 Business Premium
                                               </h6>
                                            </div>
                                            <div class="price-value">
                                               $10.50 <span>Per User/month</span>
                                            </div>
                                            <div class="tile-footer group-footer">
                                               <div class="input-group snippet-group">
                                                  <span class="input-group-btn">
                                                  <button type="button"
                                                     class="btn btn-default btn-number"
                                                     data-type="minus" data-field="quant[1]"
                                                     data-toggle="tooltip" data-placement="top"
                                                     title="" data-original-title="Delete Quantity">
                                                  <img src="images/minus-icon.png">
                                                  </button>
                                                  </span>
                                                  <input type="text" name="quant[1]"
                                                     class="form-control input-number" value="1">
                                                  <span class="input-group-btn">
                                                  <button type="button"
                                                     class="btn btn-default btn-number"
                                                     data-type="plus" data-field="quant[1]"
                                                     data-toggle="tooltip" data-placement="top"
                                                     title="" data-original-title="Add Quantity">
                                                  <i class="icon-plus"></i>
                                                  </button>
                                                  </span>
                                               </div>
                                               <button type="button"
                                                  class="btn btn-primary w-50 addToCart selected"><i
                                                  class="icon-tick" ></i> <i class="icon-cart"></i><span class="txt">Added</span></button>
                                            </div>
                                         </div>
                                      </div>
                                      <div class="col-3 sub-add-on">
                                         <div class="product-tile new-arrivals">
                                            <div class="tiles-icon">
                                               <img src="images/microsoft-icon.png">
                                               <h6 class="arrival-heading">Skype for Business PSTN
                                                  Domestic Calling
                                               </h6>
                                            </div>
                                            <div class="price-value">
                                               $2.60 <span>Per User/month</span>
                                            </div>
                                            <div class="tile-footer group-footer">
                                               <div class="input-group snippet-group">
                                                  <span class="input-group-btn">
                                                  <button type="button"
                                                     class="btn btn-default btn-number"
                                                     data-type="minus" data-field="quant[1]"
                                                     data-toggle="tooltip" data-placement="top"
                                                     title="" data-original-title="Delete Quantity">
                                                  <img src="images/minus-icon.png">
                                                  </button>
                                                  </span>
                                                  <input type="text" name="quant[1]"
                                                     class="form-control input-number" value="1">
                                                  <span class="input-group-btn">
                                                  <button type="button"
                                                     class="btn btn-default btn-number"
                                                     data-type="plus" data-field="quant[1]"
                                                     data-toggle="tooltip" data-placement="top"
                                                     title="" data-original-title="Add Quantity">
                                                  <i class="icon-plus"></i>
                                                  </button>
                                                  </span>
                                               </div>
                                               <button type="button"
                                                  class="btn btn-primary w-50 addToCart selected"><i
                                                  class="icon-tick" ></i><i class="icon-cart"></i> <span class="txt">Added</span></button>
                                            </div>
                                         </div>
                                      </div>
                                      <div class="col-3 sub-add-on">
                                         <div class="product-tile new-arrivals">
                                            <div class="tiles-icon">
                                               <img src="images/microsoft-icon.png">
                                               <h6 class="arrival-heading">MST Stream P2 for O365 Add-On
                                               </h6>
                                            </div>
                                            <div class="price-value">
                                               $180.40 <span>Per User/month</span>
                                            </div>
                                            <div class="tile-footer group-footer">
                                               <div class="input-group snippet-group">
                                                  <span class="input-group-btn">
                                                  <button type="button"
                                                     class="btn btn-default btn-number"
                                                     data-type="minus" data-field="quant[1]"
                                                     data-toggle="tooltip" data-placement="top"
                                                     title="" data-original-title="Delete Quantity">
                                                  <img src="images/minus-icon.png">
                                                  </button>
                                                  </span>
                                                  <input type="text" name="quant[1]"
                                                     class="form-control input-number" value="1">
                                                  <span class="input-group-btn">
                                                  <button type="button"
                                                     class="btn btn-default btn-number"
                                                     data-type="plus" data-field="quant[1]"
                                                     data-toggle="tooltip" data-placement="top"
                                                     title="" data-original-title="Add Quantity">
                                                  <i class="icon-plus"></i>
                                                  </button>
                                                  </span>
                                               </div>
                                               <button type="button"
                                                  class="btn btn-primary w-50 addToCart"><i
                                                  class="icon-tick"></i> <i class="icon-cart"></i><span class="txt">Add to Cart</span></button>
                                            </div>
                                         </div>
                                      </div>
                                      <div class="col-3 sub-add-on">
                                         <div class="product-tile new-arrivals">
                                            <div class="tiles-icon">
                                               <img src="images/microsoft-icon.png">
                                               <h6 class="arrival-heading">Office 365 Extra File Storage
                                               </h6>
                                            </div>
                                            <div class="price-value">
                                               $12.35 <span>Per User/month</span>
                                            </div>
                                            <div class="tile-footer group-footer">
                                               <div class="input-group snippet-group">
                                                  <span class="input-group-btn">
                                                  <button type="button"
                                                     class="btn btn-default btn-number"
                                                     data-type="minus" data-field="quant[1]"
                                                     data-toggle="tooltip" data-placement="top"
                                                     title="" data-original-title="Delete Quantity">
                                                  <img src="images/minus-icon.png">
                                                  </button>
                                                  </span>
                                                  <input type="text" name="quant[1]"
                                                     class="form-control input-number" value="1">
                                                  <span class="input-group-btn">
                                                  <button type="button"
                                                     class="btn btn-default btn-number"
                                                     data-type="plus" data-field="quant[1]"
                                                     data-toggle="tooltip" data-placement="top"
                                                     title="" data-original-title="Add Quantity">
                                                  <i class="icon-plus"></i>
                                                  </button>
                                                  </span>
                                               </div>
                                               <button type="button"
                                                  class="btn btn-primary w-50 addToCart"><i
                                                  class="icon-tick"></i> <i class="icon-cart"></i><span class="txt">Add to Cart</span></button>
                                            </div>
                                         </div>
                                      </div>
                                      <div class="clearfix"></div>
                                      <div class="col-3 showAll sub-add-on mt-2" style="display: none;">
                                         <div class="product-tile new-arrivals">
                                            <div class="tiles-icon">
                                               <img src="images/microsoft-icon.png">
                                               <h6 class="arrival-heading">Office 365 Business Premium
                                               </h6>
                                            </div>
                                            <div class="price-value">
                                               10.50 <span>Per User/month</span>
                                            </div>
                                            <div class="tile-footer group-footer">
                                               <div class="input-group snippet-group">
                                                  <span class="input-group-btn">
                                                  <button type="button"
                                                     class="btn btn-default btn-number"
                                                     data-type="minus" data-field="quant[1]"
                                                     data-toggle="tooltip" data-placement="top"
                                                     title="" data-original-title="Delete Quantity">
                                                  <img src="images/minus-icon.png">
                                                  </button>
                                                  </span>
                                                  <input type="text" name="quant[1]"
                                                     class="form-control input-number" value="1">
                                                  <span class="input-group-btn">
                                                  <button type="button"
                                                     class="btn btn-default btn-number"
                                                     data-type="plus" data-field="quant[1]"
                                                     data-toggle="tooltip" data-placement="top"
                                                     title="" data-original-title="Add Quantity">
                                                  <i class="icon-plus"></i>
                                                  </button>
                                                  </span>
                                               </div>
                                               <button type="button"
                                                  class="btn btn-primary w-50 disabled">Add</button>
                                            </div>
                                         </div>
                                      </div>
                                      <div class="col-3 showAll sub-add-on mt-2" style="display: none;">
                                         <div class="product-tile new-arrivals">
                                            <div class="tiles-icon">
                                               <img src="images/microsoft-icon.png">
                                               <h6 class="arrival-heading">Skype for Business PSTN
                                                  Domestic Calling
                                               </h6>
                                            </div>
                                            <div class="price-value">
                                               24.40 <span>Per User/month</span>
                                            </div>
                                            <div class="tile-footer group-footer">
                                               <div class="input-group snippet-group">
                                                  <span class="input-group-btn">
                                                  <button type="button"
                                                     class="btn btn-default btn-number"
                                                     data-type="minus" data-field="quant[1]"
                                                     data-toggle="tooltip" data-placement="top"
                                                     title="" data-original-title="Delete Quantity">
                                                  <img src="images/minus-icon.png">
                                                  </button>
                                                  </span>
                                                  <input type="text" name="quant[1]"
                                                     class="form-control input-number" value="1">
                                                  <span class="input-group-btn">
                                                  <button type="button"
                                                     class="btn btn-default btn-number"
                                                     data-type="plus" data-field="quant[1]"
                                                     data-toggle="tooltip" data-placement="top"
                                                     title="" data-original-title="Add Quantity">
                                                  <i class="icon-plus"></i>
                                                  </button>
                                                  </span>
                                               </div>
                                               <button type="button"
                                                  class="btn btn-primary w-50 disabled">Add</button>
                                            </div>
                                         </div>
                                      </div>
                                      <div class="col-3 showAll sub-add-on mt-2" style="display: none;">
                                         <div class="product-tile new-arrivals">
                                            <div class="tiles-icon">
                                               <img src="images/microsoft-icon.png">
                                               <h6 class="arrival-heading">MST Stream P2 for O365 Add-On
                                               </h6>
                                            </div>
                                            <div class="price-value">
                                               10.08 <span>Per User/month</span>
                                            </div>
                                            <div class="tile-footer group-footer">
                                               <div class="input-group snippet-group">
                                                  <span class="input-group-btn">
                                                  <button type="button"
                                                     class="btn btn-default btn-number"
                                                     data-type="minus" data-field="quant[1]"
                                                     data-toggle="tooltip" data-placement="top"
                                                     title="" data-original-title="Delete Quantity">
                                                  <img src="images/minus-icon.png">
                                                  </button>
                                                  </span>
                                                  <input type="text" name="quant[1]"
                                                     class="form-control input-number" value="1">
                                                  <span class="input-group-btn">
                                                  <button type="button"
                                                     class="btn btn-default btn-number"
                                                     data-type="plus" data-field="quant[1]"
                                                     data-toggle="tooltip" data-placement="top"
                                                     title="" data-original-title="Add Quantity">
                                                  <i class="icon-plus"></i>
                                                  </button>
                                                  </span>
                                               </div>
                                               <button type="button"
                                                  class="btn btn-primary w-50 disabled">Add</button>
                                            </div>
                                         </div>
                                      </div>
                                      <div class="col-3 showAll sub-add-on mt-2" style="display: none;">
                                         <div class="product-tile new-arrivals">
                                            <div class="tiles-icon">
                                               <img src="images/microsoft-icon.png">
                                               <h6 class="arrival-heading">Office 365 Extra File Storage
                                               </h6>
                                            </div>
                                            <div class="price-value">
                                               4.80 <span>Per User/month</span>
                                            </div>
                                            <div class="tile-footer group-footer">
                                               <div class="input-group snippet-group">
                                                  <span class="input-group-btn">
                                                  <button type="button"
                                                     class="btn btn-default btn-number"
                                                     data-type="minus" data-field="quant[1]"
                                                     data-toggle="tooltip" data-placement="top"
                                                     title="" data-original-title="Delete Quantity">
                                                  <img src="images/minus-icon.png">
                                                  </button>
                                                  </span>
                                                  <input type="text" name="quant[1]"
                                                     class="form-control input-number" value="1">
                                                  <span class="input-group-btn">
                                                  <button type="button"
                                                     class="btn btn-default btn-number"
                                                     data-type="plus" data-field="quant[1]"
                                                     data-toggle="tooltip" data-placement="top"
                                                     title="" data-original-title="Add Quantity">
                                                  <i class="icon-plus"></i>
                                                  </button>
                                                  </span>
                                               </div>
                                               <button type="button"
                                                  class="btn btn-primary w-50 disabled">Add</button>
                                            </div>
                                         </div>
                                      </div>
                                      <div class="clearfix"></div>
                                      <div class="col-3 showAll sub-add-on mt-2" style="display: none;">
                                         <div class="product-tile new-arrivals">
                                            <div class="tiles-icon">
                                               <img src="images/microsoft-icon.png">
                                               <h6 class="arrival-heading">Office 365 Business Premium
                                               </h6>
                                            </div>
                                            <div class="price-value">
                                               10.50 <span>Per User/month</span>
                                            </div>
                                            <div class="tile-footer group-footer">
                                               <div class="input-group snippet-group">
                                                  <span class="input-group-btn">
                                                  <button type="button"
                                                     class="btn btn-default btn-number"
                                                     data-type="minus" data-field="quant[1]"
                                                     data-toggle="tooltip" data-placement="top"
                                                     title="" data-original-title="Delete Quantity">
                                                  <img src="images/minus-icon.png">
                                                  </button>
                                                  </span>
                                                  <input type="text" name="quant[1]"
                                                     class="form-control input-number" value="1">
                                                  <span class="input-group-btn">
                                                  <button type="button"
                                                     class="btn btn-default btn-number"
                                                     data-type="plus" data-field="quant[1]"
                                                     data-toggle="tooltip" data-placement="top"
                                                     title="" data-original-title="Add Quantity">
                                                  <i class="icon-plus"></i>
                                                  </button>
                                                  </span>
                                               </div>
                                               <button type="button"
                                                  class="btn btn-primary w-50 disabled">Add</button>
                                            </div>
                                         </div>
                                      </div>
                                      <div class="col-3 showAll sub-add-on mt-2" style="display: none;">
                                         <div class="product-tile new-arrivals">
                                            <div class="tiles-icon">
                                               <img src="images/microsoft-icon.png">
                                               <h6 class="arrival-heading">Skype for Business PSTN
                                                  Domestic Calling
                                               </h6>
                                            </div>
                                            <div class="price-value">
                                               24.40 <span>Per User/month</span>
                                            </div>
                                            <div class="tile-footer group-footer">
                                               <div class="input-group snippet-group">
                                                  <span class="input-group-btn">
                                                  <button type="button"
                                                     class="btn btn-default btn-number"
                                                     data-type="minus" data-field="quant[1]"
                                                     data-toggle="tooltip" data-placement="top"
                                                     title="" data-original-title="Delete Quantity">
                                                  <img src="images/minus-icon.png">
                                                  </button>
                                                  </span>
                                                  <input type="text" name="quant[1]"
                                                     class="form-control input-number" value="1">
                                                  <span class="input-group-btn">
                                                  <button type="button"
                                                     class="btn btn-default btn-number"
                                                     data-type="plus" data-field="quant[1]"
                                                     data-toggle="tooltip" data-placement="top"
                                                     title="" data-original-title="Add Quantity">
                                                  <i class="icon-plus"></i>
                                                  </button>
                                                  </span>
                                               </div>
                                               <button type="button"
                                                  class="btn btn-primary w-50 disabled">Add</button>
                                            </div>
                                         </div>
                                      </div>
                                      <div class="col-3 showAll sub-add-on mt-2" style="display: none;">
                                         <div class="product-tile new-arrivals">
                                            <div class="tiles-icon">
                                               <img src="images/microsoft-icon.png">
                                               <h6 class="arrival-heading">MST Stream P2 for O365 Add-On
                                               </h6>
                                            </div>
                                            <div class="price-value">
                                               10.08 <span>Per User/month</span>
                                            </div>
                                            <div class="tile-footer group-footer">
                                               <div class="input-group snippet-group">
                                                  <span class="input-group-btn">
                                                  <button type="button"
                                                     class="btn btn-default btn-number"
                                                     data-type="minus" data-field="quant[1]"
                                                     data-toggle="tooltip" data-placement="top"
                                                     title="" data-original-title="Delete Quantity">
                                                  <img src="images/minus-icon.png">
                                                  </button>
                                                  </span>
                                                  <input type="text" name="quant[1]"
                                                     class="form-control input-number" value="1">
                                                  <span class="input-group-btn">
                                                  <button type="button"
                                                     class="btn btn-default btn-number"
                                                     data-type="plus" data-field="quant[1]"
                                                     data-toggle="tooltip" data-placement="top"
                                                     title="" data-original-title="Add Quantity">
                                                  <i class="icon-plus"></i>
                                                  </button>
                                                  </span>
                                               </div>
                                               <button type="button"
                                                  class="btn btn-primary w-50 disabled">Add</button>
                                            </div>
                                         </div>
                                      </div>
                                      <div class="col-3 showAll sub-add-on mt-2" style="display: none;">
                                         <div class="product-tile new-arrivals">
                                            <div class="tiles-icon">
                                               <img src="images/microsoft-icon.png">
                                               <h6 class="arrival-heading">Office 365 Extra File Storage
                                               </h6>
                                            </div>
                                            <div class="price-value">
                                               4.80 <span>Per User/month</span>
                                            </div>
                                            <div class="tile-footer group-footer">
                                               <div class="input-group snippet-group">
                                                  <span class="input-group-btn">
                                                  <button type="button"
                                                     class="btn btn-default btn-number"
                                                     data-type="minus" data-field="quant[1]"
                                                     data-toggle="tooltip" data-placement="top"
                                                     title="" data-original-title="Delete Quantity">
                                                  <img src="images/minus-icon.png">
                                                  </button>
                                                  </span>
                                                  <input type="text" name="quant[1]"
                                                     class="form-control input-number" value="1">
                                                  <span class="input-group-btn">
                                                  <button type="button"
                                                     class="btn btn-default btn-number"
                                                     data-type="plus" data-field="quant[1]"
                                                     data-toggle="tooltip" data-placement="top"
                                                     title="" data-original-title="Add Quantity">
                                                  <i class="icon-plus"></i>
                                                  </button>
                                                  </span>
                                               </div>
                                               <button type="button"
                                                  class="btn btn-primary w-50 disabled">Add</button>
                                            </div>
                                         </div>
                                      </div>
                                      <div class="col-12">
                                         <a href="javascript:void(0);"
                                            class="float-right mt-2 view-all">View More</a>
                                         <a href="javascript:void(0);"
                                            class="float-right mt-2 view-less "
                                            style="display: none;">View Less</a>
                                      </div>
                                   </div>
                                </div>
                             </div>
                          </td>
                       </tr>
                       <tr class="prod-row">
                          <td><a href="" class="text-long">Azure Active Directory Premium P2</a>
                             <span class="infoIcon" style="display: none;"><i
                                class="icon-info-blue"></i> <i class="icon-flyout-arrow"><span
                                class="path1"></span><span class="path2"></span></i></span>
                          </td>
                          <td class="text-center">4126746 </td>
                          <td style="display: none;"><span>E75DF1927F27</span> </td>
                          <td style="display: none;"><span>MST-E75DF1927F27</span> </td>
                          <td class="text-right">6.00 </td>
                          <td class="text-right">5.28 </td>
                          <td class="text-center">
                             <div class="input-group snippet-group">
                                <span class="input-group-btn">
                                <button type="button" class="btn btn-default btn-number disabled"
                                   data-type="minus" data-field="quant[1]" data-toggle="tooltip"
                                   data-placement="top" title=""
                                   data-original-title="Delete Quantity">
                                <img src="images/minus-icon.png">
                                </button>
                                </span>
                                <input type="text" name="quant[1]" class="form-control input-number"
                                   value="00">
                                <span class="input-group-btn">
                                <button type="button" class="btn btn-default btn-number"
                                   data-type="plus" data-field="quant[1]" data-toggle="tooltip"
                                   data-placement="top" title="" data-original-title="Add Quantity">
                                <i class="icon-plus"></i>
                                </button>
                                </span>
                             </div>
                          </td>
                          <td>
                             <div class="search-input-col">
                                <div class="custom-dropdown warehouse-menu dropdown cards-custom-dropdown">
                                   <button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                   <i class="icon-arrow-bottom"></i>
                                   <span class="selected-value">Select</span>
                                   </button>
                                   <div class="dropdown-menu active-menu">
                                      <div class="warehouse-list">
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Select</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Columbus (3)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Miami, FL (DFL) (4)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Monroe, NJ (DNJ) (2)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Romeoville, IL (DCH) (0)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Garland, TX (DDA) (0)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Southaven, MS (DTN) (2)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Southaven, MS (DTNL) (3)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Tracy, CA (DFR) (3)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Chino, CA (DON) (6)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Vendor Direct Ship (DDS) (3)</span></a>
                                   </div>
                                   </div>
                                </div>
                             </div>
                          </td>
                          <td class="text-right">0.00</td>
                       </tr>
                       <tr class="row-alert infoRow" style="display: none;">
                          <td colspan="9">
                             <span class="info-msg">The service exists in the existing contract and will
                             use the payment method set by the contract. The rest will use the
                             current payment method of choice.</span>
                             <a href="javascript:void(0);"><i class="icon-cross-s closeRow"></i></a>
                          </td>
                       </tr>
                       <tr class="prod-row">
                          <td><a href="" class="text-long">Azure Information Protection Premium P1</a>
                             <span class="errorIcon" style="display: none;"><i
                                class="icon-error-fill"></i> <i class="icon-flyout-arrow"><span
                                class="path1"></span><span class="path2"></span></i></span>
                          </td>
                          <td class="text-center">4126746 </td>
                          <td style="display: none;"><span>E75DF1927F27</span> </td>
                          <td style="display: none;"><span>MST-E75DF1927F27</span> </td>
                          <td class="text-right">6.00 </td>
                          <td class="text-right">5.28 </td>
                          <td class="text-center">
                             <div class="input-group snippet-group">
                                <span class="input-group-btn">
                                <button type="button" class="btn btn-default btn-number disabled"
                                   data-type="minus" data-field="quant[1]" data-toggle="tooltip"
                                   data-placement="top" title=""
                                   data-original-title="Delete Quantity">
                                <img src="images/minus-icon.png">
                                </button>
                                </span>
                                <input type="text" name="quant[1]" class="form-control input-number"
                                   value="00">
                                <span class="input-group-btn">
                                <button type="button" class="btn btn-default btn-number"
                                   data-type="plus" data-field="quant[1]" data-toggle="tooltip"
                                   data-placement="top" title="" data-original-title="Add Quantity">
                                <i class="icon-plus"></i>
                                </button>
                                </span>
                             </div>
                          </td>
                          <td>
                            <div class="search-input-col">
                                <div class="custom-dropdown warehouse-menu dropdown cards-custom-dropdown">
                                   <button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                   <i class="icon-arrow-bottom"></i>
                                   <span class="selected-value">Select</span>
                                   </button>
                                   <div class="dropdown-menu active-menu">
                                      <div class="warehouse-list">
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Select</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Columbus (3)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Miami, FL (DFL) (4)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Monroe, NJ (DNJ) (2)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Romeoville, IL (DCH) (0)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Garland, TX (DDA) (0)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Southaven, MS (DTN) (2)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Southaven, MS (DTNL) (3)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Tracy, CA (DFR) (3)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Chino, CA (DON) (6)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Vendor Direct Ship (DDS) (3)</span></a>
                                   </div>
                                   </div>
                                </div>
                             </div>
                          </td>
                          <td class="text-right">0.00</td>
                       </tr>
                       <tr class="row-alert errorRow" style="display: none;">
                          <td colspan="9">
                             <span class="error-message errWithCust"> The specified service already
                             exists for the customer. Please go to Subscription Management and choose
                             the Contract Number <span class="text-blue">1052108</span> to edit/add
                             more service line(s).</span>
                             <span class="error-message errWithoutCust">The following services already
                             exist for the selected customer, please got to Subscription Management,
                             choose the contract number <span class="text-blue">1052108</span>, click
                             Edit at the service Line(s) and Click “Add Qty”. </span>
                             <a href="javascript:void(0);"><i class="icon-cross-s closeRow"></i></a>
                          </td>
                       </tr>
                       <tr class="prod-row">
                          <td><a href="" class="text-long">Azure Advanced Threat Protect for Users</a>
                          </td>
                          <td class="text-center">4126746 </td>
                          <td style="display: none;"><span>E75DF1927F27</span> </td>
                          <td style="display: none;"><span>MST-E75DF1927F27</span> </td>
                          <td class="text-right">6.00 </td>
                          <td class="text-right">5.28 </td>
                          <td class="text-center">
                             <div class="input-group snippet-group">
                                <span class="input-group-btn">
                                <button type="button" class="btn btn-default btn-number disabled"
                                   data-type="minus" data-field="quant[1]" data-toggle="tooltip"
                                   data-placement="top" title=""
                                   data-original-title="Delete Quantity">
                                <img src="images/minus-icon.png">
                                </button>
                                </span>
                                <input type="text" name="quant[1]" class="form-control input-number"
                                   value="00">
                                <span class="input-group-btn">
                                <button type="button" class="btn btn-default btn-number"
                                   data-type="plus" data-field="quant[1]" data-toggle="tooltip"
                                   data-placement="top" title="" data-original-title="Add Quantity">
                                <i class="icon-plus"></i>
                                </button>
                                </span>
                             </div>
                          </td>
                          <td>
                             <div class="search-input-col">
                                <div class="custom-dropdown warehouse-menu dropdown cards-custom-dropdown">
                                   <button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                   <i class="icon-arrow-bottom"></i>
                                   <span class="selected-value">Select</span>
                                   </button>
                                   <div class="dropdown-menu active-menu">
                                      <div class="warehouse-list">
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Select</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Columbus (3)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Miami, FL (DFL) (4)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Monroe, NJ (DNJ) (2)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Romeoville, IL (DCH) (0)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Garland, TX (DDA) (0)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Southaven, MS (DTN) (2)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Southaven, MS (DTNL) (3)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Tracy, CA (DFR) (3)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Chino, CA (DON) (6)</span></a>
                                      <a class="dropdown-item " href="javascript:void(0);"><span>Vendor Direct Ship (DDS) (3)</span></a>
                                   </div>
                                   </div>
                                </div>
                             </div>
                          </td>
                          <td class="text-right">0.00</td>
                       </tr>
                    </tbody>
                 </table>
              </div>
              <nav aria-label="navigation" class="pagination-col pagination-disabled">
                 <span class="item-dropdown-col">
                    View
                    <div class="items-dropdown">
                       <i class="icon-arrow-bottom"></i>
                       <select>
                          <option>5</option>
                          <option>10</option>
                          <option>15</option>
                          <option>20</option>
                       </select>
                    </div>
                    <span class="view-text">Items Per Page</span>
                 </span>
                 <ul class="table-count-list m-auto">
                    <li class="left-arrow"><a href="javascript:void(0);"><i
                       class="icon-arrow-right"></i></a></li>
                    <li class="active"><a href="javascript:void(0);"><span>1</span></a></li>
                    <li class="right-arrow"><a href="javascript:void(0);"><i
                       class="icon-arrow-right"></i></a></li>
                 </ul>
                 <ul class="next-prev-page">
                    <li><a href="javascript:void(0);"><i
                       class="icon-left-arrow-double mr-1"></i>First</a></li>
                    <li><a href="javascript:void(0);"><i class="icon-left-arrow mr-1"></i>Previous</a>
                    </li>
                    <li><span class="page-count">1 of 12</span></li>
                    <li><a href="javascript:void(0);">Next<i class="icon-right-arrow-b ml-1"></i></a>
                    </li>
                    <li class="last-page"><a href="javascript:void(0);">Last <i
                       class="icon-left-arrow-double pr-1"></i></a></li>
                 </ul>
              </nav>
           </div>
        </div>
     </div>
  </div>
</div>