html - 桌子不适用于小尺寸(如手机)

我不知道为什么，但是桌子很小的宽度正越过右侧的背景（手机屏幕外部）。在412像素时，它可以工作，但在320像素时，它不想变得很好，我的桌子移到了屏幕外，一切都被切掉了。

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

最佳答案

您需要将表包装在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>