Ширина одинакова, но не отображается одинаково в таблице

Question

у меня два стола. Во фрагменте Статус агентства и Статус COI должны совпадать. но в моем коде это не правильное отображение. В этом я буду использовать класс col-md и тег width. Если я использую только класс col-md, то не устанавливаю правильную ширину для конкретного столбца, поэтому я бы добавил ширину. Я использую ASP.NET MVC, Bootstrap3 в этом проекте.

В приведенном ниже фрагменте все ширины одинаковы, но все еще не выровнены. Статус агентства и Статус 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

удалить table-responsive класс из таблицы 2. и поскольку в маленьком экране есть 6 столбцов в таблице 2 и 5 столбцов в таблице 1, я не выровняю их должным образом. спасибо

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