Question

我有两个桌子。在代码段中，代理商状态和 COI状态必须一致。但是在我的代码中，它无法正确显示。在此，我将同时使用col-md类和width标签。如果我仅使用col-md类，则没有为特定的列设置适当的宽度，因此我也将添加Width。我在此项目中使用 ASP.NET MVC，Bootstrap3 。

下面的代码段中的所有宽度均相同，但仍不能正确对齐代理商状态和 COI状态。我正好在代理商状态和 COI状态这两列下面精确定位一个，然后用青色和灰色突出显示。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<table class="table table-bordered   onloadhide compressTbl hide" style="margin-top:10px;margin-bottom:10px;text-align:center" >
    <tr>          
      <th colspan="2" style="width:38%;" class="  col-md-4">Agency</th>
      <th style="width:17.5%;background:cyan" class=" col-md-2">Agency Status</th>
      <th style="width:10.5%;" class="  col-md-2">OCR Status</th>
      <th style="width:6%;" class=" col-md-1">COI</th>
      <th style="width:28%;" class="  col-md-3"> Action On Agency</th>
    </tr>
    <tr>
       <td>1qqqq</td>
       <td>1qqqq</td>
       <td style="background-color:lightgray">Not same</td>
       <td>1qqqq</td>
       <td>1qqq</td>
       <td>1qqq</td> 
    </tr>
</table>
<table   class="table  table-bordered   table-hover ui-datatable dataTable dataTable-helper compressTbl" role="grid">
    <tr>
       <th colspan="2" class="col-md-4  tblheadercustom font-weight-bold semiboldhead bgGray" style="width:38%;" ng-click="sort('VendorDBA')">Vendor Name
        <i class="glyphicon pull-right text-primary" ng-show="sortKey=='VendorDBA'" ng-class="{'glyphicon-sort-by-attributes':!reverse,'glyphicon-sort-by-attributes-alt':reverse}"></i>
        <i class="glyphicon glyphicon-sort greycolor" ng-show="sortKey!='VendorDBA'"></i>
       </th>
       <th class="col-md-2 tblheadercustom semiboldhead bgGray" style="width:17.5%;background:cyan">COI Status</th>
       <th class="col-md-1 tblheadercustom semiboldhead bgGray" style="width:14%;">Review Status</th>
       <th class="col-md-2 tblheadercustom semiboldhead bgGray" style="width:14%;" ng-click="sort('RemainedDaysToDead')">DOLR/Days</th>
       <th class="col-md-1 tblheadercustom semiboldhead bgGray" style="width:8%;" ng-click="sort('RequestId')" align="center">Req#</th>
       <th class="col-md-2 tblheadercustom semiboldhead bgGray" style="width:8.5%;">Action</th>
     </tr>
      <tr>
        <td>&nbsp;</td>
        <td></td>
        <td align="center"></td>
        <td align="center"></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td >1qqqq</td>
        <td>1qqqq</td>
        <td style="background-color:lightgray">Not same
        </td>
        <td>1qqqq</td>
        <td>1qqq</td>
        <td>1qqq</td> 
      </tr>
</table>

Answer 1

从表2中

删除table-responsive类。并且由于在小屏幕上表2中有6列，表1中有5列，因此我无法正确对齐。谢谢

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<table class="table table-bordered onloadhide compressTbl hide" style="margin-top:10px;margin-bottom:10px;text-align:center">

  <tr>

    <th colspan="2" style="width:38%;" class="  col-md-4">
      Agency
    </th>
    <th style="width:17.5%;background:cyan" class=" col-md-2">
      Agency Status
    </th>
    <th style="width:10.5%;" class="  col-md-2">
      OCR Status
    </th>
    <th style="width:6%;" class=" col-md-1">
      COI
    </th>
    <th style="width:28%;" class="  col-md-3">
      Action On Agency
    </th>
  </tr>
  <tr>
    <td>1qqqq</td>
    <td>1qqqq</td>
    <td style="background-color:lightgray">Not same</td>
    <td>1qqqq</td>
    <td>1qqq</td>
    <td>1qqq</td>
  </tr>
</table>








<table class="table  table-bordered table-hover ui-datatable dataTable dataTable-helper compressTbl" role="grid">
  <tr>

    <th colspan="2" class="col-md-4  tblheadercustom font-weight-bold semiboldhead bgGray" style="width:38%;" ng-click="sort('VendorDBA')">
      Vendor Name
      <i class="glyphicon pull-right text-primary" ng-show="sortKey=='VendorDBA'" ng-class="{'glyphicon-sort-by-attributes':!reverse,'glyphicon-sort-by-attributes-alt':reverse}">
                                        </i>

      <i class="glyphicon glyphicon-sort greycolor" ng-show="sortKey!='VendorDBA'"></i>
    </th>
    <th class="col-md-2 tblheadercustom semiboldhead bgGray" style="width:17.5%;background:cyan">
      COI Status


    </th>
    <th class="col-md-1 tblheadercustom semiboldhead bgGray" style="width:14%;">Review Status</th>

    <th class="col-md-2 tblheadercustom semiboldhead bgGray" style="width:14%;" ng-click="sort('RemainedDaysToDead')">
      DOLR/Days

    </th>
    <th class="col-md-1 tblheadercustom semiboldhead bgGray" style="width:8%;" ng-click="sort('RequestId')" align="center">
      Req#

    </th>


    <th class="col-md-2 tblheadercustom semiboldhead bgGray" style="width:8.5%;">
      Action
    </th>

  </tr>

  <tr>
    <td>&nbsp;</td>
    <td>

    </td>
    <td align="center">

    </td>
    <td align="center">





    </td>
    <td>&nbsp;</td>

    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>1qqqq</td>
    <td>1qqqq</td>
    <td style="background-color:lightgray">Not same
    </td>
    <td>1qqqq</td>
    <td>1qqq</td>
    <td>1qqq</td>
  </tr>
</table>

宽度相同，但表中显示的不同

1 个答案: