【发布时间】：2019-06-18 02:12:44
【问题描述】：
我正在开发可折叠的表格，例如每次点击行的外部表格和内部表格。
我的代码：
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>
我尝试在实际表格之间的每个级别上放置 width:100% 但没有帮助。
尝试过的例子都不起作用：
table {
width: 100%;
}
其中一张表的宽度没有 100%，添加了这一行，
td > table { width:100%; }
使用 Bootstrap v4.1
对于内部 table tr td 没有设置全宽？如何将内表设置为全宽？
【问题讨论】：
-
你已经在某行添加了“table”类，如果你正在搜索的话，在你的css中你必须用“.table”而不是“table”来找到它们？
-
例如，如果父宽度是 50%，那么对于内表 50% 是全宽，同样的情况会出现在您的问题中
-
尝试跨越父 td 等于其父表中的总列数。您的内表将扩展为全宽。100% 是相对于父级的，如果父级 td 没有 100% 宽度，那么内表如何获得该宽度？
标签： html css bootstrap-4