1
私はテーブル入れ子になっていますCSSの表のセル幅
#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%）とのセットがあり、すべてが素晴らしく見えます。問題は最後のセルに発生します。私は、セルがテーブルの内側に収まるように幅を広げたいと思います。コンテンツのwidthにjQueryでwidthを設定しても、動作しません。テーブルレイアウトを削除してwidthを削除しても、他のセルはその尊重された幅を取得できません。私はテーブルの幅をxスクロールするようにテーブルのoverflowを変更したくないので、水平スクロールがページに表示されるようにしておきたいです。私はちょうど親テーブルの境界線を子テーブルの幅に広げたいと思う。
あなたは、あまりにも他の方法で行う子供に幅が100％を削除し、それが親になりせることができます。 –
ありがとうございました！なぜこのような単純な解決策であるときに私はそんなに悩まされたのか分かりません。ありがとう！ 子どもの幅を削除すると、他のセルが台無しになってしまったので、私はそれをやりませんでした。しかし、ありがとう！ – FatimahM