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

最新推荐文章于 2024-12-17 15:58:58 发布

转载最新推荐文章于 2024-12-17 15:58:58 发布 · 1.3k 阅读

文章标签：

#table #复杂表头

HTML笔记专栏收录该内容

8 篇文章

订阅专栏

博客围绕复杂表头需求展开，主要涉及thead代码，还提到css样式，使用important去掉bootstrap的table默认样式，给出了作者及原文链接。

需求是这样的：

需求是这样的

主要是 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
来源：优快云
原文：https://blog.youkuaiyun.com/qq_36279445/article/details/80757427
版权声明：本文为博主原创文章，转载请附上博文链接！