表格不适用于小尺寸（如手机）

wenus 发表于 Dev

金星

我不知道为什么，但是我的桌子在非常小的尺寸上的宽度超过了右侧的背景（在手机屏幕之外）。在 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>

冷水机

您需要将表格包裹在 div 中并为其指定一个类.table-responsive

这个类不能直接在桌子上工作。

见下面的结果：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。