Таблица AdminLTE разбивает экран - PullRequest
Новая
       10

Таблица AdminLTE разбивает экран

0 голосов
/ 07 февраля 2020

Я создаю систему, используя AdminLTE, и я поместил страницу с таблицей в ней, но экран сломался, потому что таблица очень большая по горизонтали, и я пытался все, чтобы изменить макет paga, чтобы сопровождать таблицу, но ничего работает.

Вот моя страница сломана:

table

А вот мой код (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 попытка (клиенты. 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%;
}

1 Ответ

1 голос
/ 07 февраля 2020

Просто попробуйте обернуть таблицу с помощью bootstrap class 

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

Это обернет вашу таблицу в столбец и будет прокручиваться горизонтально.

...