AdminLTE 表打破屏幕

Question

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

\n\n

这是我损坏的页面：

\n\n

\n\n

这是我的代码（index.blade.css）：

\n\n

@extends(\'adminlte::page\')\n\n@section(\'title\', \'Clientes\')\n\n@section(\'content_header\')\n    <h1>Clientes</h1>\n    <link href="{{ asset(\'css/clients.css\') }}" rel="stylesheet">\n@endsection\n\n@section(\'adminlte_css\')\n    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">\n@stop\n\n@section(\'content\')\n\n\n<section class="content">\n      <div id="tamanho" class="row">\n        <div id="tamanho" class="col-12">\n\n          <div id="tamanho" class="card">\n            <div id="tamanho" class="card-header">\n              <h3 class="card-title">Tabela de Clientes</h3>\n            </div>\n            <!-- /.card-header -->\n            <div id="tamanho" class="card-body">\n              <table id="example1 tabelinha" class="table table-bordered table-striped" >\n                <thead>\n                <tr>\n                    <th>ID</th>\n                    <th>Nome</th>\n                    <th>Tipo de Pessoa</th>\n                    <th>Pa\xc3\xads</th>\n                    <th>CEP</th>\n                    <th>Endere\xc3\xa7o</th>\n                    <th>Bairro</th>\n                    <th>Cidade</th>\n                    <th>UF</th>\n                    <th>Telefone</th>\n                    <th>Celular</th>\n                    <th>E-mail</th>\n                    <th>Empresa</th>\n                    <th>CPF_CNPJ</th>\n                    <th>Tipo de Cliente</th>\n                    <th>Onde nos encontrou</th>\n                </tr>\n                </thead>\n                <tbody>\n                <tr>\n                    <td>1</td>\n                    <td>Antonio Almeida dos Santos</td>\n                    <td>Jur\xc3\xaddica</td>\n                    <td>Brasil</td>\n                    <td>0022002200</td>\n                    <td>Rua endere\xc3\xa7o da Rua</td>\n                    <td>Bairro Bairro</td>\n                    <td>S\xc3\xa3o Paulo</td>\n                    <td>SP</td>\n                    <td>11 999-999</td>\n                    <td>11 777-777-777</td>\n                    <td>antonio.almeida.desa@email.com</td>\n                    <td></td>\n                    <td>058.058.058.058</td>\n                    <td>Aluno</td>\n                    <td>Google</td>\n                </tr>\n                <tr>\n                <td>2</td>\n                    <td>Antonio Almeida dos Santos</td>\n                    <td>Jur\xc3\xaddica</td>\n                    <td>Brasil</td>\n                    <td>0022002200</td>\n                    <td>Rua endere\xc3\xa7o da Rua</td>\n                    <td>Bairro Bairro</td>\n                    <td>S\xc3\xa3o Paulo</td>\n                    <td>SP</td>\n                    <td>11 999-999</td>\n                    <td>11 777-777-777</td>\n                    <td>antonio.almeida.desa@email.com</td>\n                    <td></td>\n                    <td>058.058.058.058</td>\n                    <td>Aluno</td>\n                    <td>Google</td>\n                </tr>\n                <tr>\n                <td>3</td>\n                    <td>Antonio Almeida dos Santos</td>\n                    <td>Jur\xc3\xaddica</td>\n                    <td>Brasil</td>\n                    <td>0022002200</td>\n                    <td>Rua endere\xc3\xa7o da Rua</td>\n                    <td>Bairro Bairro</td>\n                    <td>S\xc3\xa3o Paulo</td>\n                    <td>SP</td>\n                    <td>11 999-999</td>\n                    <td>11 777-777-777</td>\n                    <td>antonio.almeida.desa@email.com</td>\n                    <td></td>\n                    <td>058.058.058.058</td>\n                    <td>Aluno</td>\n                    <td>Google</td>\n                </tr>           \n                </tbody>\n              </table>\n            </div>\n            <!-- /.card-body -->\n          </div>\n          <!-- /.card -->\n        </div>\n        <!-- /.col -->\n      </div>\n      <!-- /.row -->\n    </section>\n\n\n    {{-- Pagination\n        {{ $clients->links() }}\n    --}}\n    </div>    \n\n@endsection\n

\n\n

和我的自定义 CSS 尝试（clients.css）

\n\n

div.teste1 {\n    overflow-x: scroll;\n}\n\nth, td {\n    min-width: 300px; /* width/largura das c\xc3\xa9lulas \xc3\xa0 escolha */\n}\n\n.tabelinha {\n    width: 100%;\n    word-wrap: break-word;\n}\n\n.tamanho {\n    width: 100%;\n}\n

\n

Answer 1

只是尝试用引导类包装表格

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

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