0
I have a Datatable Bootstrap that is loaded in two parts: Header is loaded using HTML normally and lines are loaded via Javascript. The problem is that when the lines come together, they create as if it were a thicker line (only occurs in the line where I highlighted red in the image)... How do I fix it?
<table id="dtPrincipal" class="table table-striped table-bordered center-header " cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Descrição</th>
<th>Ações</th>
</tr>
</thead>
<tbody></tbody>
</table>
function dataTablePrincipalLoad() {
$('.dataTables_filter input').attr('placeholder', 'Search...').hide();
var table = $("#dtPrincipal").DataTable({
"processing": true, // for show progress bar
"serverSide": true, // for process server side
"filter": true, // this is for disable filter (search box)
"orderMulti": false, // for disable multiple column at once
//"dom": '<"top"i>rt<"bottom"lp><"clear">',
"ajax": {
"url": '/pessoa-situacao-gerenciar/getPessoaSituacao',
"type": "POST",
"datatype": "json"
},
"columnDefs": [
//Estilos Das Colunas
{ className: "align-center", "targets": [0] },
{ className: "align-center", "targets": [2] },
//Largura das Colunas
{ width: 100, targets: 0 },
{ width: 100, targets: 2 }
],
"columns": [
{ "data": "id", "name": "Id", "autoWidth": true },
{ "data": "descricao", "name": "Descricao", "autoWidth": true },
{
"render": function (data, type, full, meta) {
return '<div class="btn-group" aria-label="Button group with nested dropdown" role="group"><a class="btn btn-icon btn-default btn-outline" title="Visualizar/Editar" data-modal=""><i class="icon wb-edit" aria-hidden="true"></i></a><a class="btn btn-icon btn-default btn-outline" title="Excluir" data-modal=""><i class="icon wb-trash" aria-hidden="true"></i></a><div class="btn-group" role="group"><button title="Mais Ações" type="button" class="btn btn-outline btn-default dropdown-toggle" id="exampleGroupDrop2" data-toggle="dropdown" aria-expanded="false"><i class="icon wb-more-vertical" aria-hidden="true"></i></button><div class="dropdown-menu" aria-labelledby="exampleGroupDrop2" role="menu"><a class="dropdown-item" href="javascript:void(0)" role="menuitem"><i class="icon wb-time" aria-hidden="true"></i>Histórico</a></div></div></div>'
}
}
],
"language": {
"sEmptyTable": "Nenhum registro encontrado",
"sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
"sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
"sInfoFiltered": "(Filtrados de _MAX_ registros)",
"sInfoPostFix": "",
"sInfoThousands": ".",
"sLengthMenu": "_MENU_ resultados por página",
"sLoadingRecords": "Carregando...",
"sProcessing": "Processando...",
"sZeroRecords": "Nenhum registro encontrado",
"sSearch": "Pesquisar",
"searchPlaceholder": "Digite algo...",
"oPaginate": {
"sNext": "Próximo",
"sPrevious": "Anterior",
"sFirst": "Primeiro",
"sLast": "Último"
},
"oAria": {
"sSortAscending": ": Ordenar colunas de forma ascendente",
"sSortDescending": ": Ordenar colunas de forma descendente"
}
}
});
You say the look of the line, it gets a thicker line?
– LeAndrade
Mano o que acontece eh que esta juntando duas bordas, the border-bottom of the first table with the border-top of the second element. In short, simply remove the border-bottom from the top table that solves
– hugocsl
I solved the problem by adding to my css: table.datatable thead th { border-bottom: 0; }
– Master JR
Thanks people :)
– Master JR
Not at all young, tmj
– hugocsl