テーブルは小さいサイズ（携帯電話のようなもの）では動作しません

Question

なぜか分かりませんが、非常に小さいサイズのテーブルの幅が右側の背景（電話の画面の外側）を超えています。 412 pxで動作しますが、320 pxで素敵になりたくないのでテーブルが画面外に出てすべてが切れます。

.ania-center { 
 
    margin: auto; 
 
    width: 80%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 

 
    <div class="row"> 
 
    <div class="box"> 
 
     <div class="col-lg-12"> 
 
     <hr> 
 
     <h2 class="intro-text text-center">Rejestracja on-line 
 
      <strong>bez kolejek!</strong> 
 
     </h2> 
 
     <hr> 
 
     <h2 class="text-center">Lista lekarzy</h2> 
 
     <br/> 
 
     <table class="table table-responsive table-striped ania-center"> 
 
      <tr> 
 
      <th>Imie i nazwisko</th> 
 
      <th>Gabinet</th> 
 
      <th>Telefon</th> 
 
      <th>Rejestracja on-line</th> 
 
      </tr> 
 
      @foreach($doctors as $doctor) 
 
      <tr> 
 
      <td> 
 
       {{$doctor['imie']}} {{$doctor['nazwisko']}} 
 
      </td> 
 
      <td> 
 
       {{$doctor['gabinet']}} 
 
      </td> 
 
      <td> 
 
       {{$doctor['telefon']}} 
 
      </td> 
 
      <td> 
 
       <a href="terminy/{{$doctor['id']}}">umów wizyte</a> 
 
      </td> 
 
      </tr> 
 
      @endforeach 
 
     </table> 
 
     </div> 
 
    </div> 
 
    </div>

Answer 1

あなたは、このクラスは、テーブルの上に直接動作しません

.table応答

をdivの内側にテーブルをラップし、それをクラスを与える必要があります。

、以下を参照してください結果：

.ania-center { 
 
    margin: auto; 
 
    width: 80%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 

 
    <div class="row"> 
 
    <div class="box"> 
 
     <div class="col-lg-12"> 
 
     <hr> 
 
     <h2 class="intro-text text-center">Rejestracja on-line 
 
      <strong>bez kolejek!</strong> 
 
     </h2> 
 
     <hr> 
 
     <h2 class="text-center">Lista lekarzy</h2> 
 
     <br/> 
 
     <div class="table-responsive"> 
 
      <table class="table table-striped ania-center"> 
 
      <tr> 
 
       <th>Imie i nazwisko</th> 
 
       <th>Gabinet</th> 
 
       <th>Telefon</th> 
 
       <th>Rejestracja on-line</th> 
 
      </tr> 
 
      @foreach($doctors as $doctor) 
 
      <tr> 
 
       <td> 
 
       {{$doctor['imie']}} {{$doctor['nazwisko']}} 
 
       </td> 
 
       <td> 
 
       {{$doctor['gabinet']}} 
 
       </td> 
 
       <td> 
 
       {{$doctor['telefon']}} 
 
       </td> 
 
       <td> 
 
       <a href="terminy/{{$doctor['id']}}">umów wizyte</a> 
 
       </td> 
 
      </tr> 
 
      @endforeach 
 
      </table> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>