Question

使用角度数据表，但不使用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>

Answer 1

对于仍然存在此问题的人，当您隐藏并显示带有错误选项的表，单元格或行时，表的错误大小调整发生70％。表格不应为“ display：block ”或“ display：inline-block ”；

以下是每个显示器的功能的详细列表：https://www.w3schools.com/cssref/pr_class_display.asp

这是一个示例，您可以根据编码隐藏或显示一个肢体：

.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>

隐藏和显示列中的th和td宽度更改

1 个答案: