表中的表不占用父表的全宽
我有一个嵌套在表格中的表格。我已经为使用CSS指定了宽度。但嵌套表被剪切并且不占用父表的整个宽度。
图片显示：
隐藏嵌套表的页面的概述
使用嵌套表格预览页面显示：
修改的
这是当我从嵌套表试听框中删除固定宽度时发生的情况。
我的HTML：
<div class="audition-category">
<table class="fixed actb1">
<tr class="tr-darkBlue auditionc-tr2">
<th class="acol1">Audition Times by Status</th>
<th class="acol2">#</th>
<th class="acol3">Send Notifiations?</th>
<th class="acol4"></th>
</tr>
<tr class="tr-cyan c1">
<td class="ccol1">New Audition Timess</td>
<td class="ccol2">12</td>
<td class="ccol2b"><input type="checkbox" name="" value="" /></td>
<td class="ccol3">
<ul class="expand-actions" id="expand">
<li class="expand es-btn1 show"><a> <img src="img/plus.png" alt="" /></a></li>
<li class="collapse es-btn1"><a> <img src="img/minus.png" alt="" /></a></li>
</ul>
</td>
</tr>
<tr class="ad22">
<td class="aud-parent">
<table class="tr-hidden audition-box audition-box1 fixed">
<tr>
<th class="ab-c3">Audition Time</th>
<th class="ab-c1">Name</th>
<th class="ab-c2">Role</th>
<th class="ab-c4">Agency</th>
</tr>
<tr class="tr-graybg">
<td class="ab-c3">10:00 AM</td>
<td class="ab-c1">Alice Wetterlund</td>
<td class="ab-c2">Quiet Landing Flight Attendant</td>
<td class="ab-c4">CESD</td>
</tr>
<tr>
<td class="ab-c3">10:55 AM</td>
<td class="ab-c1">Linara Washington</td>
<td class="ab-c2">Quiet Landing Flight Attendant</td>
<td class="ab-c4">Abrams Artists (Commercial Adult) - LA</td>
</tr>
<tr class="tr-graybg">
<td class="ab-c3">11:15 AM</td>
<td class="ab-c1">Felice Heather Monteith</td>
<td class="ab-c2">Quiet Landing Flight Attendant</td>
<td class="ab-c4">Adele's Kids & Adults Talent Management</td>
</tr>
<tr>
<td class="ab-c3">11:40 AM</td>
<td class="ab-c1">Kelly Ewing</td>
<td class="ab-c2">Quiet Landing Flight Attendant</td>
<td class="ab-c4">Applegate Agency Models and Talent - Hollywood, FL</td>
</tr>
<tr class="tr-graybg">
<td class="ab-c3">1:15 PM</td>
<td class="ab-c1">Dana Powell</td>
<td class="ab-c2">Quiet Landing Flight Attendant</td>
<td class="ab-c4">Conan Carroll and Associates Commercial and Print</td>
</tr>
<tr>
<td class="ab-c3">1:55 PM</td>
<td class="ab-c1">FUSCHIA! FUSCHIA!</td>
<td class="ab-c2">Quiet Landing Flight Attendant</td>
<td class="ab-c4">Abrams Artsts (Commercial Adult) - LA</td>
</tr>
<tr class="tr-graybg">
<td class="ab-c3">2:30 PM</td>
<td class="ab-c1">Jill Benjamin</td>
<td class="ab-c2">Quiet Landing Flight Attendant</td>
<td class="ab-c4">CESD</td>
</tr>
<tr>
<td class="ab-c3">2:50 PM</td>
<td class="ab-c1">elizabeth keener</td>
<td class="ab-c2">Quiet Landing Flight Attendant</td>
<td class="ab-c4">DPN Talent</td>
</tr>
<tr class="tr-graybg">
<td class="ab-c3">3:10 PM</td>
<td class="ab-c1">michelle carmichael</td>
<td class="ab-c2">Quiet Landing Flight Attendant</td>
<td class="ab-c4">Face2Face Entertainment Model & Talent Management</td>
</tr>
<tr>
<td class="ab-c3">3:55 PM</td>
<td class="ab-c1">Liz Bolton</td>
<td class="ab-c2">Quiet Landing Flight Attendant</td>
<td class="ab-c4">Conan Carroll and Associates Commercial and Print</td>
</tr>
<tr class="tr-graybg">
<td class="ab-c3">4:05 PM</td>
<td class="ab-c1">Shari Washington</td>
<td class="ab-c2">Quiet Landing Flight Attendant</td>
<td class="ab-c4">Abrams Artists (Commercial Adult) - LA</td>
</tr>
<tr>
<td class="ab-c3">6:50 PM</td>
<td class="ab-c1">Christie Lynn</td>
<td class="ab-c2">Quiet Landing Flight Attendant</td>
<td class="ab-c4">Ford - Los Angeles</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="ccol1">Changed Audition Times</td>
<td class="ccol2">3</td>
<td class="ccol2b"><input type="checkbox" name="" value="" /></td>
<td class="ccol3">
<ul class="expand-actions ea2" id="expand">
<li class="expand es-btn2 show"><a> <img src="img/plus.png" alt="" /></a></li>
<li class="collapse es-btn2"><a> <img src="img/minus.png" alt="" /></a></li>
</ul>
</td>
</tr>
<tr class="ad22">
<td class="aud-parent">
<table class="tr-hidden audition-box audition-box2 fixed">
<tr>
<th class="ab-c3">Audition Time</th>
<th class="ab-c1">Name</th>
<th class="ab-c2">Role</th>
<th class="ab-c4">Agency</th>
</tr>
<tr class="tr-graybg">
<td class="ab-c3">10:00 AM</td>
<td class="ab-c1">Alice Wetterlund</td>
<td class="ab-c2">Quiet Landing Flight Attendant</td>
<td class="ab-c4">CESD</td>
</tr>
<tr>
<td class="ab-c3">10:55 AM</td>
<td class="ab-c1">Linara Washington</td>
<td class="ab-c2">Quiet Landing Flight Attendant</td>
<td class="ab-c4">Abrams Artists (Commercial Adult) - LA</td>
</tr>
<tr class="tr-graybg">
<td class="ab-c3">11:15 AM</td>
<td class="ab-c1">Felice Heather Monteith</td>
<td class="ab-c2">Quiet Landing Flight Attendant</td>
<td class="ab-c4">Adele's Kids & Adults Talent Management</td>
</tr>
</table>
</td>
</tr>
<tr class="tr-cyan auditionc-tr2">
<td class="ccol1">Cancelled Audition Times</td>
<td class="ccol2">8</td>
<td class="ccol2b"><input type="checkbox" name="" value="" /></td>
<td class="ccol3">
<ul class="expand-actions" id="expand">
<li class="expand es-btn3 show"><a> <img src="img/plus.png" alt="" /></a></li>
<li class="collapse es-btn3"><a> <img src="img/minus.png" alt="" /></a></li>
</ul>
</td>
</tr>
<tr>
<td class="aud-parent">
<table class="tr-hidden audition-box audition-box3 fixed">
<tr>
<th class="ab-c3">Audition Time</th>
<th class="ab-c1">Name</th>
<th class="ab-c2">Role</th>
<th class="ab-c4">Agency</th>
</tr>
<tr class="tr-graybg">
<td class="ab-c3">10:00 AM</td>
<td class="ab-c1">Alice Wetterlund</td>
<td class="ab-c2">Quiet Landing Flight Attendant</td>
<td class="ab-c4">CESD</td>
</tr>
<tr>
<td class="ab-c3">10:55 AM</td>
<td class="ab-c1">Linara Washington</td>
<td class="ab-c2">Quiet Landing Flight Attendant</td>
<td class="ab-c4">Abrams Artists (Commercial Adult) - LA</td>
</tr>
<tr class="tr-graybg">
<td class="ab-c3">11:15 AM</td>
<td class="ab-c1">Felice Heather Monteith</td>
<td class="ab-c2">Quiet Landing Flight Attendant</td>
<td class="ab-c4">Adele's Kids & Adults Talent Management</td>
</tr>
<tr>
<td class="ab-c3">11:40 AM</td>
<td class="ab-c1">Kelly Ewing</td>
<td class="ab-c2">Quiet Landing Flight Attendant</td>
<td class="ab-c4">Applegate Agency Models and Talent - Hollywood, FL</td>
</tr>
<tr class="tr-graybg">
<td class="ab-c3">1:15 PM</td>
<td class="ab-c1">Dana Powell</td>
<td class="ab-c2">Quiet Landing Flight Attendant</td>
<td class="ab-c4">Conan Carroll and Associates Commercial and Print</td>
</tr>
<tr>
<td class="ab-c3">1:55 PM</td>
<td class="ab-c1">FUSCHIA! FUSCHIA!</td>
<td class="ab-c2">Quiet Landing Flight Attendant</td>
<td class="ab-c4">Abrams Artsts (Commercial Adult) - LA</td>
</tr>
<tr class="tr-graybg">
<td class="ab-c3">2:30 PM</td>
<td class="ab-c1">Jill Benjamin</td>
<td class="ab-c2">Quiet Landing Flight Attendant</td>
<td class="ab-c4">CESD</td>
</tr>
<tr>
<td class="ab-c3">2:50 PM</td>
<td class="ab-c1">elizabeth keener</td>
<td class="ab-c2">Quiet Landing Flight Attendant</td>
<td class="ab-c4">DPN Talent</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
sddasdasda
</td>
</tr>
</table>
</div>
表样式的CSS：
.audition-category {
width: 96%;
margin: auto;
border: 5px solid #4a81b6;
-webkit-border-radius: 6px;
border-radius: 6px;
margin-top: 12px;
}
.audition-category table {
}
.audition-category table tr {
height: 10px;
height: 34px;
}
.auditionc-tr2 {
height: 34px!important;
}
.ad22 {height: 1px!important; }
.audition-category table th{
text-align: left;
padding-left: 10px;
font-family: 'PT Sans', sans-serif;
font-size: 21px;
color: #FFF;
font-weight: normal;
line-height: 1;
margin-top: -5px;
font-size: 18px;
}
.audition-category table td {
text-align: left;
padding-left: 10px;
font-family: 'PT Sans', sans-serif;
font-size: 14px;
color :#333;
}
.aud-c1 {width: 180px;}
.aud-c2 {width: 580px;}
.audition-category .ccol1 {word-wrap:break-word; max-width: 1px;}
.audition-category .ccol2 {position: relative; display: inline-block; min-width: 60px;}
.audition-category .ccol2b {}
.aud-parent {
margin: 0!important;
padding: 0!important;
width: 100%!important;
padding-bottom: 0px!important;
padding-left: 1px!important;
}
.audition-box {
display: none;
margin-bottom: 5px;
width: 847px;
}
.audition-box tr {
height: 25px!important;
}
.audition-box th {
color: #333!important;
font-size: 14px!important;
font-weight: bold!important;
}
.audition-box td {
}
.ab-c1 {width: 150px;font-size: 13px!important;}
.ab-c2 {width: 200px;font-size: 13px!important;}
.ab-c3 {width: 100px;font-size: 13px!important;}
.ab-c4 {width: 300px; font-size: 13px!important; margin: 0!important; padding: 0!important}
table.fixed { table-layout:fixed!important; }
table.fixed td { overflow: hidden!important; word-break: break-all; }
.acol1{min-width: 100px;font-size: 17px!important;}
.acol2{min-width: 180px;}
.acol3{min-width: 300px; font-size: 16px!important; }
.acol4{}
.audition-category .actb1 {/*width: 100%; overflow: auto;*/ min-width: 830px; max-width: 849px;}
/*.bbig {max-width: 300px;}*/
.hide {display: none!important;}
.tr-graybg {background: #eee;}
.show {display: block!important;}
3 个答案:
答案 0 :(得分：1)
您将嵌套表放在表的第一列中。其余的行在具有固定宽度时被推到右侧，因为它扩展了整个列的宽度。
编辑：要修复它，最简单的解决方案可能是，而不是让表嵌套，让它们分开但包装在一个div中进行格式化。答案 1 :(得分：0)
对于内部表格标记，添加style="width: 100%"对我有用。
<table style="width: 100%;">
答案 2 :(得分：0)
嵌套表位于id
<td style="width:100%;" colspan="4">
<table style="width:100%;">
...
...
...
</table>
</td>
希望这对您有帮助
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？