使表响应

Question

我在这里有一些表格可以完成一些表格...第一个表在调整浏览器大小时反应完美，但第二个表没有。我怎么解决这个问题？我不知道是否有一些输入或选择是问题的原因，或者可能是将表格和表格放在一起。我需要一些帮助！

图片

 <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-responsive”。

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