Colocar os campos da tabela bootstrap 100% na tela e divididos
Olá pessoal,
Tenho uma tabela em bootstrap e estou tentando deixar ele com os campos 100% na tela e com os campos já divididos.
Estou utilizando o bootstrap 4 e me falaram que o próprio bootstrap 4 já faz esse trabalho, mas no meu caso n esta fazendo.
Segue o código:
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-responsive table-bordered table-hover" >
<thead >
<tr>
<th scope="col">Login</th>
<th scope="col">Nome</th>
<th scope="col">CPF</th>
<th scope="col">Data Inclusão</th>
<th scope="col">Última Atualização</th>
<th scope="col">Empresa</th>
<th scope="col">Status</th>
<th scope="col">Ações</th>
</tr>
</thead>
<tbody>
<tr>
<td>luis</td>
<td>XXXXX</td>
<td>000000000-00</td>
<td>00/00/0000</td>
<td>00/00/0000</td>
<td>XXX</td>
<td>xxxx</td>
<td class="text-nowrap">
<a href="#" data-original-title="Inativar">
<i class="fa fa-minus-circle text-inverse m-r-10"></i>
</a>
<a href="#" data-original-title="editar">
<i class="fa fa-pencil text-inverse m-r-10"></i>
</a>
<a href="#" data-original-title="editar">
<i class="fa fa-trash text-inverse m-r-10"></i>
</a>
</td>
</tr>
<tr>
<td>XXX</td>
<td>XXXX</td>
<td>000000000-00</td>
<td>00/00/0000</td>
<td>00/00/0000</td>
<td>XXXX</td>
<td>XXX</td>
<td class="text-nowrap">
<a href="#" data-original-title="Inativar">
<i class="fa fa-minus-circle text-inverse m-r-10"></i>
</a>
<a href="#" data-original-title="editar">
<i class="fa fa-pencil text-inverse m-r-10"></i>
</a>
<a href="#" data-original-title="editar">
<i class="fa fa-trash text-inverse m-r-10"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Mesmo colocando todas essas classes ela n fica com 100% nos campos, alguém poderia me ajudar?
Tenho uma tabela em bootstrap e estou tentando deixar ele com os campos 100% na tela e com os campos já divididos.
Estou utilizando o bootstrap 4 e me falaram que o próprio bootstrap 4 já faz esse trabalho, mas no meu caso n esta fazendo.
Segue o código:
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-responsive table-bordered table-hover" >
<thead >
<tr>
<th scope="col">Login</th>
<th scope="col">Nome</th>
<th scope="col">CPF</th>
<th scope="col">Data Inclusão</th>
<th scope="col">Última Atualização</th>
<th scope="col">Empresa</th>
<th scope="col">Status</th>
<th scope="col">Ações</th>
</tr>
</thead>
<tbody>
<tr>
<td>luis</td>
<td>XXXXX</td>
<td>000000000-00</td>
<td>00/00/0000</td>
<td>00/00/0000</td>
<td>XXX</td>
<td>xxxx</td>
<td class="text-nowrap">
<a href="#" data-original-title="Inativar">
<i class="fa fa-minus-circle text-inverse m-r-10"></i>
</a>
<a href="#" data-original-title="editar">
<i class="fa fa-pencil text-inverse m-r-10"></i>
</a>
<a href="#" data-original-title="editar">
<i class="fa fa-trash text-inverse m-r-10"></i>
</a>
</td>
</tr>
<tr>
<td>XXX</td>
<td>XXXX</td>
<td>000000000-00</td>
<td>00/00/0000</td>
<td>00/00/0000</td>
<td>XXXX</td>
<td>XXX</td>
<td class="text-nowrap">
<a href="#" data-original-title="Inativar">
<i class="fa fa-minus-circle text-inverse m-r-10"></i>
</a>
<a href="#" data-original-title="editar">
<i class="fa fa-pencil text-inverse m-r-10"></i>
</a>
<a href="#" data-original-title="editar">
<i class="fa fa-trash text-inverse m-r-10"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Mesmo colocando todas essas classes ela n fica com 100% nos campos, alguém poderia me ajudar?
Luis Rebecca
Curtidas 0
Respostas
Rodrigo Duclerc
07/02/2018
Olá Luis,
Não sei se entendi bem a sua questão. A tabela deveria ocupar 100% da largura da tela?
Poderia explicar melhor?
Não sei se entendi bem a sua questão. A tabela deveria ocupar 100% da largura da tela?
Poderia explicar melhor?
GOSTEI 0
Luis Rebecca
07/02/2018
Já consegui arrumar, o problema era que a tabela n estava pegando 100% da tela.
GOSTEI 0