Html Table 中的多行表头(th) 实现

需求是这样的：

主要是 thead

代码：

<thead>
        <tr>
            <th colspan="6" class="text-center salesInfoStyle">
                Sales Order Information
            </th>
            <th colspan="2" class="text-center dispositionStyle">
                Disposition
            </th>
        </tr>
      <tr>
        <!-- <th style="position: relative;" [style.top]="columnTop"><span></span></th> -->
        <th style="position: relative;" class="salesInfoStyle" [style.top]="columnTop"><span rtSort="del_order">SO Number</span></th>
        <th style="position: relative;" class="salesInfoStyle" [style.top]="columnTop"><span rtSort="type">Type</span></th>
        <th style="position: relative;" class="salesInfoStyle" [style.top]="columnTop"><span>Delivery Date / Time</span></th>
        <th style="position: relative;" class="salesInfoStyle" [style.top]="columnTop"><span rtSort="plant">Plant</span></th>
        <th style="position: relative;" class="salesInfoStyle" [style.top]="columnTop"><span rtSort="customer">Customer</span></th>
        <th style="position: relative;" class="salesInfoStyle" [style.top]="columnTop"><span rtSort="shipto">Ship To</span></th>
        <th style="position: relative;" class="dispositionStyle" [style.top]="columnTop"><span rtSort="condition">Condition</span></th>
        <th style="position: relative;" class="dispositionStyle" [style.top]="columnTop"><span rtSort="process_phase">Process Phase</span></th>
      </tr>
    </thead>

css：

.salesInfoStyle{
    border-top: none !important;
    border-bottom: none !important;
    background: #b17744 !important;
}
.dispositionStyle{
    border-top: none !important;
    border-bottom: none !important;
    background: #a76428 !important;
}

important 为了去掉 bootstrap 的table 默认样式。

--------------------- 
作者：Martin_Yelvin 
来源：CSDN 
原文：https://blog.csdn.net/qq_36279445/article/details/80757427 
版权声明：本文为博主原创文章，转载请附上博文链接！