Tabela bootstrap responsiva - Não escrever em duas linhas dentro da TR

02/04/2018

3

Bom dia,

Estou fazendo uma tabela em Bootstrap e quero que ela fique com a barra de rolagem horizontal;

Certo!! Eu coloquei a barra de rolagem, porem a tabela n fica totalmente responsiva, alguns campos pular para a linha de baixo e eu queria que todos ficassem em somente uma linha.

Segue o código para melhor entendimento:

<div class="table-responsive">
<table class="table table-sm table-striped table-bordered table-hover" style="width: 99.99%" >
<thead>
<tr>
<th scope="col" style="text-align: center;">Identificação</th>
<th scope="col" style="text-align: center;">Endereço</th>
<th scope="col" style="text-align: center;">Bairro</th>
<th scope="col" style="text-align: center;">Cidade</th>
<th scope="col" style="text-align: center;">Estado</th>
<th scope="col" style="text-align: center;">Cep</th>
<th scope="col" style="text-align: center;">Cnpj/Cpf</th>
<th scope="col" style="text-align: center;">Ins. Estadual</th>
<th scope="col" style="text-align: center;">Restrições</th>
<th scope="col" style="text-align: center;">Ações</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tecmaf</td>
<td>Rua xxxxxxxxxxx,2024</td>
<td>Residencial Nardini</td>
<td>Americana</td>
<td>SP</td>
<td>154765488-25</td>
<td>475214874545</td>
<td>4144634627723</td>
<td>08:00 ÀS 11:30 </td>
<td class="text-nowrap" style="text-align: center"><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>Tecmaf</td>
<td>Rua xxxxxxxxxxx,2024</td>
<td>Residencial Nardini</td>
<td>Americana</td>
<td>SP</td>
<td>154765488-25</td>
<td>475214874545</td>
<td>4144634627723</td>
<td>08:00 ÀS 11:30</td>
<td class="text-nowrap" style="text-align: center"><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>Tecmaf</td>
<td>Rua xxxxxxxxxxx,2024</td>
<td>Residencial Nardini</td>
<td>Americana</td>
<td>SP</td>
<td>154765488-25</td>
<td>475214874545</td>
<td>4144634627723</td>
<td>08:00 ÀS 11:30</td>
<td class="text-nowrap" style="text-align: center"><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>Tecmaf</td>
<td>Rua xxxxxxxxxxx,2024</td>
<td>Residencial Nardini</td>
<td>Americana</td>
<td>SP</td>
<td>154765488-25</td>
<td>475214874545</td>
<td>4144634627723</td>
<td>08:00 ÀS 11:30 </td>
<td class="text-nowrap" style="text-align: center"><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>

Resumindo... preciso que ela fique totalmente em uma linha só e o usuário só consiga ver os dados se ele rolar a barra.
Responder
×
+1 DevUP
Acesso diário, +1 DevUP
Parabéns, você está investindo na sua carreira