Como diminuir margens exteriores do jquery DataTable[RESOLVIDO]

Front-end
#1

Boas colegas. Decidi utilizar o datatable num projecto mas estou com problemas é a minha primeira vez… Não sei como alterar as margens da direita nem da esquerda estou com dificuldades. Tentei usar o css mas não alterou nada. Peço a vossa ajuda. Abaixo deixo a imagem…

49
Captura de tela 2019-11-08 14.54.49.png1366×652 39.6 KB

Antes da implementação do datatable

43
Captura de tela 2019-11-08 15.43.43.png1366×664 40.4 KB

#2

normalmente o dataTables faz os estilos inline com a propriedade style do html, por isso você não consegue alterar com css, recomendo que depois de construir seu dataTables, faça uma função js para remover o atributo style que está colocando essa margem e adicione uma classe sua customizada caso necessário.

#3

Se for isso, você pode utilizar !important na sua propriedade CSS, ai ela sobrescreverá o css inline.

Ex:

.minha-classe {
    margin: 0 !important;
}

Normalmente essas libs tem uma classe css chamada container que possui a propriedade de margin, talvez você tenha colocado ela, mas sem postar o código fica difícil dizer o que realmente pode ser.

#4

Como deveria deveria desenvolver essa função?

#5

.minha-classe {
margin: 0 !important;
}

Tentei usar essa configuração mas não deu certo. Eu estou usar o datatable através de webjars. Abaixo deixo o codigo:

codigo na view:

   <table class="table table-hover tabela" id="myDataTable">
    				<caption>Lista das Instituições de Ensino registadas</caption>
    				<thead class="thead-light">
    					<tr>
    						<th>#</th>
    						<th>Nome</th>
    						<th>Nº Estudantes</th>
    						<th>Data de registo</th>
    						<th>Ações</th>
    					</tr>
    				</thead>
    				<tbody>
    					<tr th:each="i:${instituicoes}">
    						<td th:text="${i.id}"></td>
    						<td th:text="${i.nome}"></td>
    						<td th:text="${i.numeroEstudantes}"></td>
    						<td th:text="${#temporals.format(i.dataRegisto)}"></td>
    						<td><a class="btn btn-outline-info btn-sm"
    							th:href="@{/instituicaoensino/editar/{id} (id=${i.id}) }"><i
    								class="fas fa-pencil-alt"></i></a>
    							<button th:id="${'btn_instituicaoensino/excluir/' + i.id}"
    								type="button" data-toggle="modal" data-target="#modalExclusao"
    								class="btn btn-outline-danger btn-sm" href="#">
    								<i class="fas fa-trash-alt"></i>
    							</button></td>
    					</tr>
    				</tbody>
    			</table>

codigo jquery:

$(document).ready( function () {
		    $('#myDataTable').DataTable({  
		    });
		} );