AdminLTE table 碎屏

Question

我正在使用 AdminLTE 制作一个系统，我在其中放了一个带有 table 的页面，但是屏幕坏了，因为 table 在水平方向上太大了，我尝试了一切来改变table 的 paga 布局，但没有任何效果。

这是我损坏的页面：

这是我的代码 (index.blade.css)：

@extends('adminlte::page')

@section('title', 'Clientes')

@section('content_header')
    <h1>Clientes</h1>
    <link href="{{ asset('css/clients.css') }}" rel="stylesheet">
@endsection

@section('adminlte_css')
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
@stop

@section('content')


<section class="content">
      <div id="tamanho" class="row">
        <div id="tamanho" class="col-12">

          <div id="tamanho" class="card">
            <div id="tamanho" class="card-header">
              <h3 class="card-title">Tabela de Clientes</h3>
            </div>
            <!-- /.card-header -->
            <div id="tamanho" class="card-body">
              <table id="example1 tabelinha" class="table table-bordered table-striped" >
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Nome</th>
                    <th>Tipo de Pessoa</th>
                    <th>País</th>
                    <th>CEP</th>
                    <th>Endereço</th>
                    <th>Bairro</th>
                    <th>Cidade</th>
                    <th>UF</th>
                    <th>Telefone</th>
                    <th>Celular</th>
                    <th>E-mail</th>
                    <th>Empresa</th>
                    <th>CPF_CNPJ</th>
                    <th>Tipo de Cliente</th>
                    <th>Onde nos encontrou</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>Antonio Almeida dos Santos</td>
                    <td>Jurídica</td>
                    <td>Brasil</td>
                    <td>0022002200</td>
                    <td>Rua endereço da Rua</td>
                    <td>Bairro Bairro</td>
                    <td>São Paulo</td>
                    <td>SP</td>
                    <td>11 999-999</td>
                    <td>11 777-777-777</td>
                    <td>antonio.almeida.desa@email.com</td>
                    <td></td>
                    <td>058.058.058.058</td>
                    <td>Aluno</td>
                    <td>Google</td>
                </tr>
                <tr>
                <td>2</td>
                    <td>Antonio Almeida dos Santos</td>
                    <td>Jurídica</td>
                    <td>Brasil</td>
                    <td>0022002200</td>
                    <td>Rua endereço da Rua</td>
                    <td>Bairro Bairro</td>
                    <td>São Paulo</td>
                    <td>SP</td>
                    <td>11 999-999</td>
                    <td>11 777-777-777</td>
                    <td>antonio.almeida.desa@email.com</td>
                    <td></td>
                    <td>058.058.058.058</td>
                    <td>Aluno</td>
                    <td>Google</td>
                </tr>
                <tr>
                <td>3</td>
                    <td>Antonio Almeida dos Santos</td>
                    <td>Jurídica</td>
                    <td>Brasil</td>
                    <td>0022002200</td>
                    <td>Rua endereço da Rua</td>
                    <td>Bairro Bairro</td>
                    <td>São Paulo</td>
                    <td>SP</td>
                    <td>11 999-999</td>
                    <td>11 777-777-777</td>
                    <td>antonio.almeida.desa@email.com</td>
                    <td></td>
                    <td>058.058.058.058</td>
                    <td>Aluno</td>
                    <td>Google</td>
                </tr>           
                </tbody>
              </table>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>


    {{-- Pagination
        {{ $clients->links() }}
    --}}
    </div>    

@endsection

我的习惯 css 尝试 (clients.css)

div.teste1 {
    overflow-x: scroll;
}

th, td {
    min-width: 300px; /* width/largura das células à escolha */
}

.tabelinha {
    width: 100%;
    word-wrap: break-word;
}

.tamanho {
    width: 100%;
}

Answer 1

试着把 table 换成 bootstrap class

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

这会将您的 table 包裹到列中，并且可以水平滚动。

AdminLTE table 碎屏

AdminLTE table breaks the screen

laravel

laravel-6

adminlte