2 layers table header-CodePudding

I'm trying to have 2 layers of table headers, this is what I am trying to achieve

Fiddle https://jsfiddle.net/bheng/2yonh9gj/

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-filled">
            <div class="panel-body">

                
                <div class="panel-heading">
                    <h5>
                        Subscriber Redundancy Group (4)
                    </h5>

                </div>

                
                <table class="table table-responsive-sm table-hover table-border">
                    <thead>
                        <tr>
                            <th class="text-center" width="5%">Name</th>
                            <th colspan="2">Active User Plane </th>
                            <th class="text-center" width="10%">Name</th>
                            <th class="text-center" width="10%">Interface</th>
                            <th colspan="3">Standby User Plane </th>
                            <th class="text-center" width="10%">Name</th>
                            <th class="text-center" width="10%">Interface</th>
                            <th class="text-center" width="10%">VRRP ID</th>
                            <th class="text-center" width="5%">Subscriber Group ID</th>
                            <th class="text-center" width="5%">Sessions</th>
                        </tr>


                        <tr>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>


                    </thead>
                    <tbody>


                        
                        <tr valign="top|middle|bottom|baseline">
                            <td class="text-center">
                                SRG1
                            </td>

                            <td class="text-center"> up-1 </td>
                            <td class="text-center"> 0 </td>

                            <td class="text-center"> up-3 </td>
                            <td class="text-center"> 2 </td>
                            <td class="text-center"> 100 </td>

                            <td class="text-center"> 1 </td>
                            <td class="text-center"> 0</td>
                        </tr>

                        
                        <tr valign="top|middle|bottom|baseline">
                            <td class="text-center">
                                SRG2
                            </td>

                            <td class="text-center"> up-2 </td>
                            <td class="text-center"> 1 </td>

                            <td class="text-center"> - </td>
                            <td class="text-center"> - </td>
                            <td class="text-center"> - </td>

                            <td class="text-center"> 2 </td>
                            <td class="text-center"> 0</td>
                        </tr>

                        
                        <tr valign="top|middle|bottom|baseline">
                            <td class="text-center">
                                SRG3
                            </td>

                            <td class="text-center"> up-3 </td>
                            <td class="text-center"> - </td>

                            <td class="text-center"> up-2 </td>
                            <td class="text-center"> - </td>
                            <td class="text-center"> - </td>

                            <td class="text-center"> 3 </td>
                            <td class="text-center"> 0</td>
                        </tr>

                        
                        <tr valign="top|middle|bottom|baseline">
                            <td class="text-center">
                                SRG5
                            </td>

                            <td class="text-center"> up-10 </td>
                            <td class="text-center"> - </td>

                            <td class="text-center"> - </td>
                            <td class="text-center"> - </td>
                            <td class="text-center"> - </td>

                            <td class="text-center"> 4 </td>
                            <td class="text-center"> 0</td>
                        </tr>

                        

                    </tbody>
                </table>
                

            </div>
        </div>
    </div>
</div>

I'm not sure what to do next, can someone please provide some hints ?

I've also tried

<table class="table table-responsive-sm table-hover table-border">
<col>
<colgroup span="2"></colgroup>
<colgroup span="3"></colgroup>
<thead>
    <tr>
        <td rowspan="5"></td> 
        <th>SRG Name</th>
        <th colspan="2" scope="colgroup">Active User Plane</th>
        <th colspan="3" scope="colgroup">Standby User Plane </th>
        <th>Subscriber Group ID</th>
        <th>Sessions</th>
    </tr>
    <tr>

        <th class="text-center" width="5%" >Name</th>
        <th scope="col" class="text-center" width="10%" >Name</th>
        <th scope="col" class="text-center" width="10%" >Interface</th>
        <th scope="col" class="text-center" width="10%" >Name</th>
        <th scope="col" class="text-center" width="10%" >Interface</th>
        <th scope="col" class="text-center" width="10%" >VRRP ID</th>
        <th class="text-center" width="5%" >Subscriber Group ID</th>
        <th class="text-center" width="5%" >Sessions</th>
    </tr>

</thead>

CodePudding user response：

You need to use rowspan in for headers that span multiple rows and colspan for headers that span multiple columns. Was able to modify your jsfiddle to make it look like the screenshot you provided: https://jsfiddle.net/0bx3yg9e/1/