0
点赞
收藏
分享

微信扫一扫

Html_多行表头(th) table中的 th 多行


需求是这样的:

Html_多行表头(th)  table中的  th 多行_css



主要是 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 默认样式。



举报

相关推荐

0 条评论