Question

我正在使用AdminLTE制作系统，并且在其中放置了带有表格的页面，但是由于表格水平太大而导致屏幕破裂，我尝试了一切更改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

只需尝试使用bootstrap类包装表

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

这会将您的表格包装到该列中，并且可以水平滚动。

AdminLTE表格打破了屏幕

1 个答案: