我有一些嵌套表。
我有一个带有两个 tds 的 tr,一个是 14%,另一个是 86%。
较长的 td 包含另一个表。现在子表的宽度很长。
我想要做的就是将子表放在较长的 td 中,这样它就不会溢出,而是滚动。
table,td,th{
border: 1px solid gray;
}
<table class="display" id="dt3">
<thead>
<tr class="table_header">
<th style="width:14%"> </th>
<th class="schedule_view" style="width:86%;">Consultant schedule</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeA">
<td>
John Dolan
</td>
<td class="schedule_view">
<div style="overflow:hidden;">
<table class="display">
<tr>
<th> </th>
<th>25-May
<br />2015</th>
<th>01-Jun
<br />2015</th>
<th>08-Jun
<br />2015</th>
<th>15-Jun
<br />2015</th>
<th>22-Jun
<br />2015</th>
<th>29-Jun
<br />2015</th>
<th>06-Jul
<br />2015</th>
<th>13-Jul
<br />2015</th>
<th>20-Jul
<br />2015</th>
<th>27-Jul
<br />2015</th>
<th>03-Aug
<br />2015</th>
<th>10-Aug
<br />2015</th>
<th>17-Aug
<br />2015</th>
<th>24-Aug
<br />2015</th>
<th>31-Aug
<br />2015</th>
<th>07-Sep
<br />2015</th>
<th>14-Sep
<br />2015</th>
<th>21-Sep
<br />2015</th>
<th>28-Sep
<br />2015</th>
<th>05-Oct
<br />2015</th>
<th>12-Oct
<br />2015</th>
<th>19-Oct
<br />2015</th>
<th>26-Oct
<br />2015</th>
<th>02-Nov
<br />2015</th>
<th>09-Nov
<br />2015</th>
<th>16-Nov
<br />2015</th>
<th>23-Nov
<br />2015</th>
<th>30-Nov
<br />2015</th>
</tr>
<tr style="background-color: #FFFFFF;">
<td>BOC</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td> </td>
<td>100%</td>
<td>100%</td>
<td>100%</td>
<td>100%</td>
<td>100%</td>
<td>100%</td>
<td>100%</td>
<td>100%</td>
<td>100%</td>
<td>100%</td>
<td>100%</td>
<td>100%</td>
<td>100%</td>
<td>100%</td>
<td>0%</td>
<td>0%</td>
<td>0%</td>
<td>0%</td>
<td>0%</td>
<td>0%</td>
<td>0%</td>
<td>0%</td>
<td>0%</td>
<td>0%</td>
<td>0%</td>
<td>0%</td>
<td>0%</td>
<td>0%</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr style="display:none;">
<th></th>
<th class="schedule_view" style="display:none;"></th>
</tr>
</tfoot>
</table>