使用 Angular 数据表但不使用 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 是引导 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;
}
使用 Angular 隐藏和显示
<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>
最佳答案
对于仍有此问题的人，当您在显示中使用错误的选项隐藏和显示表格、单元格或行时，表格大小调整错误的概率为 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>关于html - 隐藏和显示列的 th 和 td 宽度变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41351211/