html - 如何将内部设置为全宽

Question

我正在开发可折叠的表格，例如每行点击的外部表格和内部表格。

我的代码:

HTML:

<table class="table outerTbl mb-0">
    <thead>
        <tr>
            <th scope="col">SL No.</th>
            <th scope="col">Program Details</th>
            <th scope="col">Program Levels</th>
            <th scope="col">Program Start Date</th>
            <th scope="col">Program End Date</th>
            <th scope="col">Total Duration</th>
            <th scope="col">Start</th>
            <th scope="col">Cacel</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row" class="collapsed" data-toggle="collapse" data-target="#row1" aria-expanded="false" aria-controls="row1">View</th>
            <td>Stay Active & Win</td>
            <td>03</td>
            <td>03/12/2018</td>
            <td>03/02/2019</td>
            <td>5 Days, 240secs.</td>
            <td><img src="images/start.png"></td>
            <td><img src="images/cancel.png"></td>
        </tr>
        <tr id="row1" class="table collapse innerTbl text-center col-11">
            <td>
                <table>
                    <thead>
                        <tr>
                            <th scope="col">Program Details</th>
                            <th scope="col">Program Levels</th>      
                            <th scope="col">Progrma Duration</th>
                            <th scope="col">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>               
                            <td>Power Up <img src="images/trophy.png"/></td>
                            <td>Level 1</td>
                            <td>240 secs</td>
                            <td>Play</td>              
                        </tr>
                        <tr>               
                            <td>Warriors <img src="images/trophy.png"/></td>
                            <td>Level 2</td>
                            <td>5 Days</td>
                            <td>Play</td>              
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <th scope="row" class="collapsed" data-toggle="collapse" data-target="#row2" aria-expanded="false" aria-controls="row2">View</th>
            <td>New Year Goals</td>
            <td>01</td>
            <td>01/01/2019</td>
            <td>01/02/2019</td>
            <td>5 Days, 240secs.</td>
            <td><img src="images/start.png"/></td>
            <td><img src="images/cancel.png"/></td>
        </tr>
        <tr id="row2" class="table collapse innerTbl text-center col-11">  
            <td>
                <table >
                    <thead>
                        <tr>
                            <th scope="col">Program Details</th>
                            <th scope="col">Program Levels</th>      
                            <th scope="col">Progrma Duration</th>
                            <th scope="col">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>               
                            <td>Power Up <img src="images/trophy.png"/></td>
                            <td>Level 1</td>
                            <td>240 secs</td>
                            <td>Play</td>              
                        </tr>
                        <tr>               
                            <td>Warriors <img src="images/trophy.png"/></td>
                            <td>Level 2</td>
                            <td>5 Days</td>
                            <td>Play</td>              
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>  
    </tbody>
</table>

我尝试将宽度:100% 放在实际表格之间的每个级别上，但没有帮助。
尝试过的例子都没有用:

table {
    width: 100%;       
}

并且其中一个表格的宽度不是 100%，添加了这一行，

td > table { width:100%; }

使用 Bootstrap v4.1in for inner table tr td 没有设置全宽？如何将内表设置为全宽？

Answer 1

希望对您有所帮助。下面是代码供大家引用codepen

<table class="table outerTbl mb-0">
    <thead>
        <tr>
            <th scope="col">SL No.</th>
            <th scope="col">Program Details</th>
            <th scope="col">Program Levels</th>
            <th scope="col">Program Start Date</th>
            <th scope="col">Program End Date</th>
            <th scope="col">Total Duration</th>
            <th scope="col">Start</th>
            <th scope="col">Cacel</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row" class="collapsed" data-toggle="collapse" data-target="#row1" aria-expanded="false" aria-controls="row1">View</th>
            <td>Stay Active & Win</td>
            <td>03</td>
            <td>03/12/2018</td>
            <td>03/02/2019</td>
            <td>5 Days, 240secs.</td>
            <td><img src="images/start.png"></td>
            <td><img src="images/cancel.png"></td>
        </tr>
        <tr id="row1" class="table collapse innerTbl text-center col-11">
            <td colspan="8">
                <table width="100%">
                    <thead>
                        <tr>
                            <th scope="col">Program Details</th>
                            <th scope="col">Program Levels</th>      
                            <th scope="col">Progrma Duration</th>
                            <th scope="col">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>               
                            <td>Power Up <img src="images/trophy.png"/></td>
                            <td>Level 1</td>
                            <td>240 secs</td>
                            <td>Play</td>              
                        </tr>
                        <tr>               
                            <td>Warriors <img src="images/trophy.png"/></td>
                            <td>Level 2</td>
                            <td>5 Days</td>
                            <td>Play</td>              
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <th scope="row" class="collapsed" data-toggle="collapse" data-target="#row2" aria-expanded="false" aria-controls="row2">View</th>
            <td>New Year Goals</td>
            <td>01</td>
            <td>01/01/2019</td>
            <td>01/02/2019</td>
            <td>5 Days, 240secs.</td>
            <td><img src="images/start.png"/></td>
            <td><img src="images/cancel.png"/></td>
        </tr>
        <tr id="row2" class="table collapse innerTbl text-center col-11">  
            <td>
                <table >
                    <thead>
                        <tr>
                            <th scope="col">Program Details</th>
                            <th scope="col">Program Levels</th>      
                            <th scope="col">Progrma Duration</th>
                            <th scope="col">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>               
                            <td>Power Up <img src="images/trophy.png"/></td>
                            <td>Level 1</td>
                            <td>240 secs</td>
                            <td>Play</td>              
                        </tr>
                        <tr>               
                            <td>Warriors <img src="images/trophy.png"/></td>
                            <td>Level 2</td>
                            <td>5 Days</td>
                            <td>Play</td>              
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>  
    </tbody>
</table>