html - 表格不适用于小尺寸(如手机)

Question

我不知道为什么，但我的 table 在非常小的尺寸上的宽度超过了右侧的背景(在手机屏幕之外)。在 412 px 上它可以工作，但在 320 px 上不想很好，我的 table 在屏幕外，所有东西都被剪掉了。

.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

你需要将表格包裹在一个 div 中并给它一个类 .table-responsive

这个类不直接在 table 上工作。

查看以下结果:

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