【发布时间】：2015-08-11 05:46:47
【问题描述】：
我有一些嵌套表。
我有一个带有两个 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>【问题讨论】：
-
我认为这是一个典型的情况，你不应该首先使用一个表（你的“父”表）......事实上你在那个表和第一列中只有 2 列甚至不需要标题是一个很好的指标。如果您正在构建的是一个有日程安排的人员列表，只需使用一个列表，并且在每个列表项中您可以输入人员姓名和日程安排（这次以表格的形式，因为这在语义上是正确的）
标签： html html-table nested-table