隐藏和显示列中的th和td宽度更改
问题描述 投票：0回答：1
使用角度数据表，但不使用angularjs数据表的colvis功能，而是使用ng-show / hide隐藏列。显示/隐藏功能按预期工作，但th和td的宽度发生变化。我试过table-layout：fixed;但这没有用。
这是html代码
<div class="container">
<table id="taskSearch"
datatable="ng"
dt-options="dtOptions"
class="table table-bordered table">
<thead>
<tr>
<th ng-show="checkboxModel.pn">Policy Number</th>
<th ng-show="checkboxModel.lob">LOB</th>
<th ng-show="checkboxModel.state">State</th>
<th ng-show="checkboxModel.firstInsuredFirstName">First Insured First Name</th>
<th ng-show="checkboxModel.firstInsuredLastName">First Insured Last Name</th>
<th ng-show="checkboxModel.transEffDate">Transaction Effective Date</th>
<th ng-show="checkboxModel.policyEffDate">Policy Effective Date</th>
<th ng-show="checkboxModel.receivedPassDate">Received Pass Date</th>
<th ng-show="checkboxModel.documentType">Document Type</th>
<th ng-show="checkboxModel.inWorkflow">In WorkFlow?</th>
<th ng-show="checkboxModel.workflowTaskType">WorkFlow Task Type</th>
<th ng-show="checkboxModel.batchName">Batch Name</th>
<th ng-show="checkboxModel.systemOfRecord">System of Record</th>
<th ng-show="checkboxModel.taskPinName">Task PIN and Name</th>
<th ng-show="checkboxModel.taskStatus">Task Status</th>
<th ng-show="checkboxModel.taskComplexity">Task Complexity</th>
<th ng-show="checkboxModel.taskCompleteDate">Task Complete Date</th>
<th ng-show="checkboxModel.taskActualCycleTime">Task Actual Cycle Time</th>
<th ng-show="checkboxModel.taskTargetCycleTime">Task Target Cycle Time</th>
<th ng-show="checkboxModel.docCreationSource">Doc Creation Source</th>
<th ng-show="checkboxModel.documentTypeCode">Document Type Code</th>
<th ng-show="checkboxModel.policyExpirationDate">Policy Expiration Date</th>
<th ng-show="checkboxModel.scanPinName">Scan/Import PIN and Name</th>
<th ng-show="checkboxModel.fileName">File Name</th>
<th ng-show="checkboxModel.uniqueDocId">Unique Doc ID</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="ts in taskSearch">
<td ng-show="checkboxModel.pn">
{{ ts.policyNumber }}
</td>
<td ng-show="checkboxModel.lob">
{{ ts.lob }}
</td>
<td ng-show="checkboxModel.state">
{{ ts.jurisCode}}
</td>
<td ng-show="checkboxModel.firstInsuredLastName">
{{ ts.firstInsuredFirstName}}
</td>
<td ng-show="checkboxModel.firstInsuredFirstName">
{{ ts.firstInsuredLastName}}
</td>
<td ng-show="checkboxModel.transEffDate">
{{ ts.transEffDate }}
</td>
<td ng-show="checkboxModel.policyEffDate">
{{ ts.policyEffDate }}
</td>
<td ng-show="checkboxModel.receivedPassDate">
{{ ts.receivedPassDate}}
</td>
<td ng-show="checkboxModel.documentType">
{{ ts.docTypeDesc}}
</td>
<td ng-show="checkboxModel.inWorkflow">
{{ ts.inWorkflow}}
</td>
<td ng-show="checkboxModel.workflowTaskType">
{{ ts.workflowTaskType }}
</td>
<td ng-show="checkboxModel.batchName">
{{ ts.batchName }}
</td>
<td ng-show="checkboxModel.systemOfRecord">
{{ ts.systemOfRecord}}
</td>
<td ng-show="checkboxModel.taskPinName">
{{ ts.taskPinName}}
</td>
<td ng-show="checkboxModel.taskStatus">
{{ ts.taskStatus}}
</td>
<td ng-show="checkboxModel.taskComplexity">
{{ ts.taskComplexity }}
</td>
<td ng-show="checkboxModel.taskCompleteDate">
{{ ts.taskCompleteDate }}
</td>
<td ng-show="checkboxModel.taskActualCycleTime">
{{ ts.taskActualCycleTime}}
</td>
<td ng-show="checkboxModel.taskTargetCycleTime">
{{ ts.taskTargetCycleTime}}
</td>
<td ng-show="checkboxModel.docCreationSource">
{{ ts.tocCreateSource}}
</td>
<td ng-show="checkboxModel.documentTypeCode">
{{ ts.docTypeCode }}
</td>
<td ng-show="checkboxModel.policyExpirationDate">
{{ ts.policyExpDate }}
</td>
<td ng-show="checkboxModel.scanPinName">
{{ ts.ingestionUserDisplayName}}
</td>
<td ng-show="checkboxModel.fileName">
{{ ts.importFilename}}
</td>
<td ng-show="checkboxModel.uniqueDocId">
{{ ts.documentID}}
</td>
</tr>
</tbody>
</table>
</div>
css是bootstrap css
table {
max-width: 100%;
background-color: transparent;
}
th {
text-align: left;
}
.table {
width: 100%;
margin-bottom: 20px;
}
.table thead > tr > th,
.table tbody > tr > th,
.table tfoot > tr > th,
.table thead > tr > td,
.table tbody > tr > td,
.table tfoot > tr > td {
padding: 8px;
line-height: 1.428571429;
vertical-align: top;
border-top: 1px solid #dddddd;
}
.table thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid #dddddd;
}
用角度隐藏和显示
<div class="col-sm-3">
<li>
<label class="toggle-vis">
<input type="checkbox" ng-model="checkboxModel.pn">
Policy Number
</label>
</li>
<hr class="style1">
<li>
<label class="toggle-vis">
<input type="checkbox" ng-model="checkboxModel.firstInsuredLastName">
First Insured Last Name
</label>
</li>
<hr class="style1">
<li>
<label class="toggle-vis">
<input type="checkbox" ng-model="checkboxModel.documentType">
Document Type
</label>
</li>
</div>
1个回答
0
投票
投票
对于仍然存在此问题的人，当您隐藏并在显示中显示错误选项的表，单元格或行时，表的错误调整大小会发生70％。表格不应该是'display：block'或'display：inline-block';
这里列出了每个显示器的详细信息：https://www.w3schools.com/cssref/pr_class_display.asp
这里有一个示例，您可以根据编码隐藏或显示tbody：
.d-table-row-group{
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<table class="table table-striped table-bordered mt-3">
<thead class="noselect">
<tr>
<th scope="column">Table header 1</th>
<th scope="column">Table header 2</th>
<th scope="column">Table header 3</th>
<th scope="column">Table header 4</th>
</tr>
</thead>
<tbody [class]="conditionHere ? 'd-none': 'd-table-row-group'">
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
</tr>
</tbody>
</table>最新问题
- 如何解决pdf文件中的字体编码问题
- 使用csv导入产品时如何上传magento 2中所有商店的产品图像标签
- 如何在 powerShell 中将变量设置为文本文档的特定行？
- 为什么在使用过滤器分支清理后，我的包文件中仍然存在大文件？
- 如何在 Xcode 5 中禁用单个文件的 ARC？
- 在Angular中通用化服务，我想创建一个获取所有HTTP请求的服务是否可行？
- 无法修改Rprofile.site
- JDBI 如何动态创建 WHERE 子句同时防止 SQL 注入？
- 在 NMake 中测试文件是否存在
- 如何在 Visual C++ 中小写环境变量？
- MSDN 库下载？
- 如何使用 Azure Databricks 和 Azure DevOps 制作 CI-CD 来更新存储库
- 如何在 playwright 中为多个浏览器设置单个 ws 端点？
- 在 Next.js 14 服务器组件中访问 window.location.origin
- 无法使用nodejs（打字稿）通过avalanche fuji测试网调用chainlink函数
- 刷新令牌在安全方面真的有好处吗？
- 找到 N 个人组成的小组，让每个人都能见面，但重叠程度最小？
- Android Instant App 深层链接错误 - 只提供一个 URL
- 如何识别组内的行是否在同一列中具有值
- 使用 SpigotMC 更改新的双面标志后，如何从 PlayerInteract 事件上的标志读取文本？
© www.soinside.com 2019 - 2024. All rights reserved.