テーブルを反応させる

Question

私はいくつかのフォームをここにいくつか書いています...最初のテーブルはブラウザのサイズを調整すると完全に反応しますが、2番目のテーブルは反応しません。これをどうすれば解決できますか？入力や選択の一部が問題の原因であるかどうか、あるいはフォームとテーブルを一緒に使用するかどうかはわかりません。私はいくつかの助けが必要です！

ピクチャー

<div class="card-block"> 
    <div class="alert alert-warning" role="alert"> 
    <strong>Atencion!</strong> Luego de realizar las modificaciones recuerda APLICAR LOS CAMBIOS! 
</div> 

<form (ngSubmit)="aplicarCambios()" #frmRetardos="ngForm"> 
      <button type="submit" class="btn btn-sm btn-secondary" > Aplicar Cambios </button> <br><br> 
      <input type="checkbox" [(ngModel)]="retardosState[0]" name="booleanRetardoTx1" id="booleanRetardoTx1" > Habilitar SFN <br><br> 
      <table class="table table-responsive" #tablaretardo> 
        <thead> 
         <tr> 
          <th >Retardos</th> 
         </tr> 
        </thead> 
        <tbody> 

     <tr> 
      <th scope="row">Retardo de Red: Dt<sub>max</sub> (x100ns)</th> 
      <td > <input type="text" class="form-control" [(ngModel)]="retardoRed" name="retardoRed" aria-describedby="basic-addon1"> </td> 
     </tr> 
        </tbody> 
       </table> <br> 
    <div class="col"> 
    <div class="row"> 

       <table class="table"> 
         <thead> 
          <tr> 
           <th>Retardo adicional</th> 
          </tr> 
         </thead> 
         <thead> 
          <tr> 
           <th>#</th> 
           <th>Equipment ID</th> 
           <th>Time-Offset: Dt<sub>off</sub> (x100ns)</th> 
           <th>Offset</th> 
           <th>Modo</th> 
           <th scope="col">Enable</th> 
          </tr> 
         </thead> 

     <tbody> 

      <tr> 
       <th scope="row">Tx 1</th> 
       <td> <input type="text" class="form-control" [(ngModel)]="idModulador[0]" name="idModulador[0]" (change)="mod()" title="equipmentIdTx1" aria-describedby="basic-addon1"> </td> 
       <td><input type="text" class="form-control" [(ngModel)]="retardos[0]" name="retardoTx1" title="timeOffsetTx1" pattern="[-0-9.]{1,10}" aria-describedby="basic-addon1"> </td> 
       <td> <select (change)="cambio($event.target.value, 'Tx1')" [(ngModel)]="polarity[0]" name="polarity[0]" title="polarity[0]" > 
        <option>Atraso (+)</option> 
        <option >Adelanto (-)</option> 
        </select> 
      </td> 
      <td><select [disabled]="negativeOn1"> 
        <option >Dynamic</option> 
        <option *ngIf="!negativeOn1">Static</option> 
        </select></td> 
       <td><input type="checkbox" [(ngModel)]="retardosState[0]" name="booleanRetardoTx1" id="booleanRetardoTx1" ></td> 
      </tr> 
      <tr> 
       <th scope="row">Tx 2</th> 
       <td> <input type="text" class="form-control" [(ngModel)]="idModulador[1]" name="idModulador[1]" (change)="mod()" title="equipmentIdTx2" aria-describedby="basic-addon1"> </td> 
       <td> <input type="text" class="form-control" [(ngModel)]="retardos[1]" name="retardoTx2" title="timeOffsetTx2" aria-describedby="basic-addon1"></td> 
       <td><select (change)="cambio($event.target.value, 'Tx2')" [(ngModel)]="polarity[1]" name="polarity[1]" title="polarity[1]"> 
         <option>Atraso (+)</option> 
         <option >Adelanto (-)</option> 
        </select></td> 
       <td><select [disabled]="negativeOn2"> 
        <option>Dynamic</option> 
        <option *ngIf="!negativeOn2">Static</option> 
        </select></td> 
       <td><input type="checkbox" [(ngModel)]="retardosState[1]" name="booleanRetardoTx2" id="booleanRetardoTx2" ></td> 

      </tr> 
      <tr> 
       <th scope="row">Tx 3</th> 
       <td><input type="text" class="form-control" [(ngModel)]="idModulador[2]" name="idModulador[2]" (change)="mod()" title="equipmentIdTx3" aria-describedby="basic-addon1"> </td> 
       <td><input type="text" class="form-control" [(ngModel)]="retardos[2]" name="retardoTx3" title="timeOffsetTx3" aria-describedby="basic-addon1"> </td> 
       <td><select (change)="cambio($event.target.value, 'Tx3')" [(ngModel)]="polarity[2]" name="polarity[2]" title="polarity[2]"> 
         <option>Atraso (+)</option> 
         <option >Adelanto (-)</option> 
        </select></td> 
      <td><select [disabled]="negativeOn3"> 
        <option>Dynamic</option> 
        <option *ngIf="!negativeOn3" >Static</option> 
        </select></td> 
       <td><input type="checkbox" [(ngModel)]="retardosState[2]" name="booleanRetardoTx3" id="booleanRetardoTx3" ></td> 
      </tr> 
      <tr> 
       <th scope="row">Tx 4</th> 
       <td> <input type="text" class="form-control" [(ngModel)]="idModulador[3]" name="idModulador[3]" (change)="mod()" title="equipmentIdTx4" aria-describedby="basic-addon1"> </td> 
       <td> <input type="text" class="form-control" [(ngModel)]="retardos[3]" name="retardoTx4" title="timeOffsetTx4" aria-describedby="basic-addon1"></td> 
       <td><select (change)="cambio($event.target.value, 'Tx4')" [(ngModel)]="polarity[3]" name="polarity[3]" title="polarity[3]"> 
         <option>Atraso (+)</option> 
         <option >Adelanto (-)</option> 
        </select></td> 
      <td><select [disabled]="negativeOn4"> 
        <option>Dynamic</option> 
        <option *ngIf="!negativeOn4">Static</option> 
        </select></td> 
       <td><input type="checkbox" [(ngModel)]="retardosState[3]" name="booleanRetardoTx4" id="booleanRetardoTx4" ></td> 
      </tr> <br> 


     </tbody> 

        </table> 


</div> 
</div>  
     </form> 
</div> 

Answer 1

テーブルの上のdivを作成し、そのdivのために、 "TBL応答性" を追加します。

<div class="tbl-responsive"><table></table></div>