【发布时间】：2017-12-17 16:54:30
【问题描述】：
我有嵌套表：
#progressHeading thead td.spacingCol {
border: 2px solid #ffffff;
background-color: #ffffff;
}
.collapseProcess {
background: url(../images/minus.png) no-repeat 4px 4px;
cursor: pointer;
float: left;
width: 25px;
}
.expandProcess {
background: url(../images/plus.png) no-repeat 4px 4px;
cursor: pointer;
float: left;
width: 25px;
}
#progressHeading {
table-layout: fixed;
width: auto;
}
#progressHeading thead td {
border: 2px solid #000000;
background-color: #B8CCE4;
text-align: center;
height: 35px;
}
#progressHeading td.startDayCol {
border-right: 1px solid #000000;
margin-left: 5px;
}
#progressHeading td.endDayCol {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
#progressHeading td.totalDaysCol {
border-left: 1px solid #000000;
}
thead {
font-weight: bold;
}
.processCol {
width: 300px;
}
.startDayCol,
.endDayCol,
.totalDaysCol {
width: 100px;
}
.statusCol {
width: 125px
}
table tr td.spacingCol,
table .phaseRow td.spacingCol,
#progressHeading thead td.spacingCol {
background: #ffffff;
width: 5px;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-top: 2px solid #FFFFFF;
border-bottom: 2px solid #FFFFFF;
}
table tr td:nth-child(9) {
border-right: 2px solid #000000;
}
table tr td:nth-child(5),
table tr td:nth-child(6) {
border-right: 1px solid #000000;
}
table tr td:nth-child(1) {
border-left: 2px solid #000000;
}
table thead td,
table .phaseRow td {
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
#floatDays tbody td {
border-bottom: 2px solid #000000;
}
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
border-spacing: 0px;
empty-cells: hide;
}
#progressHeading thead td #calendarDisplay td {
width: 100px;
border-right: 1px solid #000000;
}
#progressHeading thead td #dailyDisplay td {
background-color: #DCE6F1;
font-weight: normal;
height: 15px;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
}
#progressHeading thead td .dailyDisplayRow td {
height: 12px !important;
}
table td div {
background-color: #B8CCE4;
color: #B8CCE4;
}
.dayWidth {
float: left;
width: 20px;
color: #000000;
background-color: #DCE6F1;
font-weight: normal;
}<table>
<table id="progressHeading" style="display: table;">
<thead>
<tr>
<td class="processCol">Process</td>
<td class="spacingCol"></td>
<td class="statusCol">Status</td>
<td class="spacingCol"></td>
<td class="startDayCol">Start Day</td>
<td class="endDayCol">End Day</td>
<td class="totalDaysCol">Total Days</td>
<td class="spacingCol"></td>
<td class="calendarCol">
<table>
<tbody>
<tr class="dailyDisplayRow">
<td>Week of <br>Jun 05</td>
<td>Week of <br>Jun 12</td>
<td>Week of <br>Jun 19</td>
<td>Week of <br>Jun 26</td>
<td>Week of <br>Jul 03</td>
<td>Week of <br>Jul 10</td>
<td>Week of <br>Jul 17</td>
<td>Week of <br>Jul 24</td>
<td>Week of <br>Jul 31</td>
<td>Week of <br>Aug 07</td>
<td>Week of <br>Aug 14</td>
<td>Week of <br>Aug 21</td>
<td>Week of <br>Aug 28</td>
<td>Week of <br>Sep 04</td>
<td>Week of <br>Sep 11</td>
<td>Week of <br>Sep 18</td>
<td>Week of <br>Sep 25</td>
<td>Week of <br>Oct 02</td>
<td>Week of <br>Oct 09</td>
<td>Week of <br>Oct 16</td>
<td>Week of <br>Oct 23</td>
<td>Week of <br>Oct 30</td>
<td>Week of <br>Nov 06</td>
<td>Week of <br>Nov 13</td>
<td>Week of <br>Nov 20</td>
<td>Week of <br>Nov 27</td>
<td>Week of <br>Dec 04</td>
<td>Week of <br>Dec 11</td>
<td>Week of <br>Dec 18</td>
<td>Week of <br>Dec 25</td>
<td>Week of <br>Jan 01</td>
<td>Week of <br>Jan 08</td>
</tr>
<tr class="dailyDisplayRow" id="ctl00_ctl40_g_ce153c5a_4a3a_4dc9_9b78_f4877028ebbd_dailyDisplay">
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
<td>
<div class="weekClass">
<div class="dayWidth">
M
</div>
<div class="dayWidth">
T
</div>
<div class="dayWidth">
W
</div>
<div class="dayWidth">
Th
</div>
<div class="dayWidth">
F
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="9"></td>
</tr>
</tbody>
</table>每个初始表格单元格都有一组 (table-layout: fixed, width: 100%)，一切看起来都很棒。问题出现在最后一个单元格中。我想扩大宽度，以便单元格扩大以适合其中的表格。即使我用 jQuery 将width 设置为内容的width，它也不起作用。如果我删除表格布局和width，其他单元格不会得到他们尊重的宽度。我不想更改表格的overflow，因此您正在 x 滚动表格的宽度，我希望保持水平滚动在页面上。我只是想让父表的边框延伸到子表的宽度。
【问题讨论】：
标签： html css html-table