css - 可折叠表格行不超过单元格宽度
问题描述
我有一个带有 +/- 符号的表格,可以点击。当用户单击它时,它会在下面打开一个 div 以显示更多详细信息。我遇到的问题是可折叠的 div 仅与一个表格列一样宽,我似乎无法让它成为全宽。
这是带有折叠行的表格的屏幕截图:
这是展开后的样子:
我的 html 看起来像这样:
<div class="table-row" ng-repeat="work in item.work_history | orderBy: '-to' track by $index">
<div class="table-cell" style="vertical-align: middle;" >
<a class="flex collapsed"
ng-class="{'accordion-toggle collapsed':work.campaign.length>0}"
ng-if="work.campaign.length>0" data-toggle="collapse"
ng-click="c.campaign(work)" href="#{{work.sys_id}}"
role="button" aria-expanded="false" aria-controls="collapseDetails">
</a>
</div>
<div class="table-cell">
<a href="javascript:void(0)" title="Edit Work History"
ng-click="c.newEntry(work.sys_id,'x_dnf_gw_found_work_history','newWork');">
Edit
</a>
</div>
<div class="table-cell">
{{work.work_name}}
</div>
<div class="table-cell">
{{work.from}}
</div>
<div class="table-cell">
{{work.to}}
</div>
<div class="table-cell">
<button title="Add Campaign" type="button" class="btn btn-link btn-xs"
ng-click="c.newEntry(-1, 'x_campaigns','newWork')">
Add Campaign
</button>
</div>
</div>
<div class="collapse" id="{{campaignDetails}}">
<ul>
<li ng-repeat="campaigns in c.campaign_details">
{{campaigns.from}} - {{campaigns.to}}: {{campaigns.camp}}
</li>
</ul>
</div>
我知道为什么展开的细节会显示在一个表格单元格中,但我不确定如何解决这个样式问题。谢谢你的帮助!
解决方案
添加class "table-row"
到您的可折叠部门
<div class="table-row" ng-repeat="work in item.work_history | orderBy: '-to' track by $index">
<div class="table-cell" style="vertical-align: middle;" >
<a class="flex collapsed" ng-class="{'accordion-toggle collapsed':work.campaign.length>0}" ng-if="work.campaign.length>0" data-toggle="collapse" ng-click="c.campaign(work)" href="#{{work.sys_id}}" role="button" aria-expanded="false" aria-controls="collapseDetails"></a>
</div>
<div class="table-cell">
<a href="javascript:void(0)" title="Edit Work History" ng-click="c.newEntry(work.sys_id,'x_dnf_gw_found_work_history','newWork');">Edit</a>
</div>
<div class="table-cell">
{{work.work_name}}
</div>
<div class="table-cell">
{{work.from}}
</div>
<div class="table-cell">
{{work.to}}
</div>
<div class="table-cell">
<button title="Add Campaign" type="button" class="btn btn-link btn-xs" ng-click="c.newEntry(-1, 'x_campaigns','newWork')">Add Campaign</button>
</div>
</div>
<div class="collapse table-row" id="{{campaignDetails}}">
<ul>
<li ng-repeat="campaigns in c.campaign_details">
{{campaigns.from}} - {{campaigns.to}}: {{campaigns.camp}}
</li>
</ul>
</div>
推荐阅读
- java - Java基于空检查将bean添加到不同的列表
- python - 在 Window 服务上托管 Flask 时出现导入错误
- python - Python Flask Migrate 不会忽略我的模型之外的数据库中的现有表
- amazon-web-services - 数据源中的关键字“count”是什么意思?
- java - 如何从图库中将图像插入 SQLite 数据库?
- keycloak - 未在用户控制台上列出的已授予访问权限的应用程序
- ajax - 如何在 laravel 中安装 vue-laravel-image-crop-upload?
- windows - 从 .bat 脚本启动的可执行服务器需要输入才能继续执行吗?
- arrays - 如何在 asembly riscv 中使用 short int 对堆栈的元素求和
- android - startForeground 无法显示我的通知