I have a table, where I need to decrease the padding
of the lines of the same.
If I could use a padding-bottom: -XXpx; e padding-top: -XXpx;
it would solve my problem. However, it is not possible to use negative values, as far as my research reports.
I wonder if it really is not possible to use a negative value? If yes, what is the alternative to decreasing the spacing between rows in a table.
A small example of the table would be this:
.tblCompleta tr td {
padding-top: 0px;
padding-bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><scripttype="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<table style="width:1149px;" id="tblPrestacao" class="table-striped cell-border table-bordered tblCompleta table-responsive" cellspacing="0" cellpadding="0">
<thead>
<tr bgcolor="#F1F1F1">
<th><p align="center">Entidade</p></th>
<th bgcolor="#F0E68C"><p align="center">1</p></th>
<th bgcolor="#F0E68C"><p align="center">2</p></th>
<th bgcolor="#F0E68C"><p align="center">3</p></th>
<th bgcolor="#F0E68C"><p align="center">4</p></th>
<th bgcolor="#F0E68C"><p align="center">5</p></th>
<th bgcolor="#F0E68C"><p align="center">6</p></th>
<th><p align="center">7</p></th>
<th><p align="center">8</p></th>
<th><p align="center">9</p></th>
<th><p align="center">10</p></th>
<th><p align="center">11</p></th>
<th><p align="center">12</p></th>
<th><p align="center">Pendência</p></th>
<th><p align="center">Observação</p></th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 400px;" >
<font size="2">
<a class="btnEditCliente" data-target="#myModal" data-toggle="modal" href="/Cliente/EditarCliente/3" title="Editar Cliente">C.M. Areal</a>
</font>
</td>
<td bgcolor="gren">
<p align="center"><font size="1"><b><input checked="checked" data-val="true" data-val-required="O campo bJaneiro é obrigatório." name="[0].EnvioPrestacao.bJaneiro" type="checkbox" value="true" /><input name="[0].EnvioPrestacao.bJaneiro" type="hidden" value="false" /></b></font></p>
</td>
<td bgcolor="gren">
<p align="center"><font size="1"><b><input checked="checked" data-val="true" data-val-required="O campo bFevereiro é obrigatório." name="[0].EnvioPrestacao.bFevereiro" type="checkbox" value="true" /><input name="[0].EnvioPrestacao.bFevereiro" type="hidden" value="false" /></b></font></p>
</td>
<td bgcolor="gren">
<p align="center"><font size="1"><b><input checked="checked" data-val="true" data-val-required="O campo bMarco é obrigatório." name="[0].EnvioPrestacao.bMarco" type="checkbox" value="true" /><input name="[0].EnvioPrestacao.bMarco" type="hidden" value="false" /></b></font></p>
</td>
<td bgcolor="red"><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bAbril é obrigatório." name="[0].EnvioPrestacao.bAbril" type="checkbox" value="true" /><input name="[0].EnvioPrestacao.bAbril" type="hidden" value="false" /></b></font></p> </td>
<td bgcolor="red"><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bMaio é obrigatório." name="[0].EnvioPrestacao.bMaio" type="checkbox" value="true" /><input name="[0].EnvioPrestacao.bMaio" type="hidden" value="false" /></b></font></p> </td>
<td><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bJunho é obrigatório." name="[0].EnvioPrestacao.bJunho" type="checkbox" value="true" /><input name="[0].EnvioPrestacao.bJunho" type="hidden" value="false" /></b></font></p> </td>
<td><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bJulho é obrigatório." name="[0].EnvioPrestacao.bJulho" type="checkbox" value="true" /><input name="[0].EnvioPrestacao.bJulho" type="hidden" value="false" /></b></font></p> </td>
<td><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bAgosto é obrigatório." name="[0].EnvioPrestacao.bAgosto" type="checkbox" value="true" /><input name="[0].EnvioPrestacao.bAgosto" type="hidden" value="false" /></b></font></p> </td>
<td><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bSetembro é obrigatório." name="[0].EnvioPrestacao.bSetembro" type="checkbox" value="true" /><input name="[0].EnvioPrestacao.bSetembro" type="hidden" value="false" /></b></font></p> </td>
<td><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bOutubro é obrigatório." name="[0].EnvioPrestacao.bOutubro" type="checkbox" value="true" /><input name="[0].EnvioPrestacao.bOutubro" type="hidden" value="false" /></b></font></p> </td>
<td><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bNovembro é obrigatório." name="[0].EnvioPrestacao.bNovembro" type="checkbox" value="true" /><input name="[0].EnvioPrestacao.bNovembro" type="hidden" value="false" /></b></font></p> </td>
<td><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bDezembro é obrigatório." name="[0].EnvioPrestacao.bDezembro" type="checkbox" value="true" /><input name="[0].EnvioPrestacao.bDezembro" type="hidden" value="false" /></b></font></p> </td>
<td align="center" style="width: 20px">
<select class="form-control" data-val="true" data-val-number="The field TipoPendencia must be a number." name="[0].EnvioPrestacao.TipoPendencia"><option value="1">Cliente</option>
<option value="2">Produto</option>
<option selected="selected" value="3">N/A</option>
</select>
</td>
<td style="width: 210px">
<p align="center">N/A</p>
</td>
</tr>
<tr>
<td style="width: 400px;" >
<font size="2">
<a class="btnEditCliente" data-target="#myModal" data-toggle="modal" href="/Cliente/EditarCliente/5" title="Editar Cliente">P.M. Guapimirim</a>
</font>
</td>
<td bgcolor="red"><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bJaneiro é obrigatório." name="[1].EnvioPrestacao.bJaneiro" type="checkbox" value="true" /><input name="[1].EnvioPrestacao.bJaneiro" type="hidden" value="false" /></b></font></p> </td>
<td bgcolor="red"><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bFevereiro é obrigatório." name="[1].EnvioPrestacao.bFevereiro" type="checkbox" value="true" /><input name="[1].EnvioPrestacao.bFevereiro" type="hidden" value="false" /></b></font></p> </td>
<td bgcolor="red"><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bMarco é obrigatório." name="[1].EnvioPrestacao.bMarco" type="checkbox" value="true" /><input name="[1].EnvioPrestacao.bMarco" type="hidden" value="false" /></b></font></p> </td>
<td bgcolor="red"><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bAbril é obrigatório." name="[1].EnvioPrestacao.bAbril" type="checkbox" value="true" /><input name="[1].EnvioPrestacao.bAbril" type="hidden" value="false" /></b></font></p> </td>
<td bgcolor="red"><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bMaio é obrigatório." name="[1].EnvioPrestacao.bMaio" type="checkbox" value="true" /><input name="[1].EnvioPrestacao.bMaio" type="hidden" value="false" /></b></font></p> </td>
<td><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bJunho é obrigatório." name="[1].EnvioPrestacao.bJunho" type="checkbox" value="true" /><input name="[1].EnvioPrestacao.bJunho" type="hidden" value="false" /></b></font></p> </td>
<td><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bJulho é obrigatório." name="[1].EnvioPrestacao.bJulho" type="checkbox" value="true" /><input name="[1].EnvioPrestacao.bJulho" type="hidden" value="false" /></b></font></p> </td>
<td><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bAgosto é obrigatório." name="[1].EnvioPrestacao.bAgosto" type="checkbox" value="true" /><input name="[1].EnvioPrestacao.bAgosto" type="hidden" value="false" /></b></font></p> </td>
<td><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bSetembro é obrigatório." name="[1].EnvioPrestacao.bSetembro" type="checkbox" value="true" /><input name="[1].EnvioPrestacao.bSetembro" type="hidden" value="false" /></b></font></p> </td>
<td><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bOutubro é obrigatório." name="[1].EnvioPrestacao.bOutubro" type="checkbox" value="true" /><input name="[1].EnvioPrestacao.bOutubro" type="hidden" value="false" /></b></font></p> </td>
<td><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bNovembro é obrigatório." name="[1].EnvioPrestacao.bNovembro" type="checkbox" value="true" /><input name="[1].EnvioPrestacao.bNovembro" type="hidden" value="false" /></b></font></p> </td>
<td><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bDezembro é obrigatório." name="[1].EnvioPrestacao.bDezembro" type="checkbox" value="true" /><input name="[1].EnvioPrestacao.bDezembro" type="hidden" value="false" /></b></font></p> </td>
<td align="center" style="width: 20px">
<select class="form-control" data-val="true" data-val-number="The field TipoPendencia must be a number." name="[1].EnvioPrestacao.TipoPendencia"><option selected="selected" value="1">Cliente</option>
<option value="2">Produto</option>
<option value="3">Serviço</option>
</select>
</td>
<td style="width: 210px">
<p align="center">N/A....</p>
</td>
</tr>
<tr>
<td style="width: 400px;" >
<font size="2">
<a class="btnEditCliente" data-target="#myModal" data-toggle="modal" href="/Cliente/EditarCliente/4" title="Editar Cliente">C.M. Guapimirim</a>
</font>
</td>
<td bgcolor="red"><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bJaneiro é obrigatório." name="[2].EnvioPrestacao.bJaneiro" type="checkbox" value="true" /><input name="[2].EnvioPrestacao.bJaneiro" type="hidden" value="false" /></b></font></p> </td>
<td bgcolor="red"><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bFevereiro é obrigatório." name="[2].EnvioPrestacao.bFevereiro" type="checkbox" value="true" /><input name="[2].EnvioPrestacao.bFevereiro" type="hidden" value="false" /></b></font></p> </td>
<td bgcolor="red"><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bMarco é obrigatório." name="[2].EnvioPrestacao.bMarco" type="checkbox" value="true" /><input name="[2].EnvioPrestacao.bMarco" type="hidden" value="false" /></b></font></p> </td>
<td bgcolor="red"><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bAbril é obrigatório." name="[2].EnvioPrestacao.bAbril" type="checkbox" value="true" /><input name="[2].EnvioPrestacao.bAbril" type="hidden" value="false" /></b></font></p> </td>
<td bgcolor="red"><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bMaio é obrigatório." name="[2].EnvioPrestacao.bMaio" type="checkbox" value="true" /><input name="[2].EnvioPrestacao.bMaio" type="hidden" value="false" /></b></font></p> </td>
<td><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bJunho é obrigatório." name="[2].EnvioPrestacao.bJunho" type="checkbox" value="true" /><input name="[2].EnvioPrestacao.bJunho" type="hidden" value="false" /></b></font></p> </td>
<td><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bJulho é obrigatório." name="[2].EnvioPrestacao.bJulho" type="checkbox" value="true" /><input name="[2].EnvioPrestacao.bJulho" type="hidden" value="false" /></b></font></p> </td>
<td><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bAgosto é obrigatório." name="[2].EnvioPrestacao.bAgosto" type="checkbox" value="true" /><input name="[2].EnvioPrestacao.bAgosto" type="hidden" value="false" /></b></font></p> </td>
<td><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bSetembro é obrigatório." name="[2].EnvioPrestacao.bSetembro" type="checkbox" value="true" /><input name="[2].EnvioPrestacao.bSetembro" type="hidden" value="false" /></b></font></p> </td>
<td><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bOutubro é obrigatório." name="[2].EnvioPrestacao.bOutubro" type="checkbox" value="true" /><input name="[2].EnvioPrestacao.bOutubro" type="hidden" value="false" /></b></font></p> </td>
<td><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bNovembro é obrigatório." name="[2].EnvioPrestacao.bNovembro" type="checkbox" value="true" /><input name="[2].EnvioPrestacao.bNovembro" type="hidden" value="false" /></b></font></p> </td>
<td><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bDezembro é obrigatório." name="[2].EnvioPrestacao.bDezembro" type="checkbox" value="true" /><input name="[2].EnvioPrestacao.bDezembro" type="hidden" value="false" /></b></font></p> </td>
<td align="center" style="width: 20px">
<select class="form-control" data-val="true" data-val-number="The field TipoPendencia must be a number." name="[2].EnvioPrestacao.TipoPendencia"><option value="1">Cliente</option>
<option value="2">Produto</option>
<option selected="selected" value="3">Serviço</option>
</select>
</td>
<td style="width: 210px">
<p align="center">N/A ....</p>
</td>
</tr>
<tr>
<td style="width: 400px;" >
<font size="2">
<a class="btnEditCliente" data-target="#myModal" data-toggle="modal" href="/Cliente/EditarCliente/6" title="Editar Cliente">Inst. Previdência Iguaba Grande</a>
</font>
</td>
<td bgcolor="gren">
<p align="center"><font size="1"><b><input checked="checked" data-val="true" data-val-required="O campo bJaneiro é obrigatório." name="[3].EnvioPrestacao.bJaneiro" type="checkbox" value="true" /><input name="[3].EnvioPrestacao.bJaneiro" type="hidden" value="false" /></b></font></p>
</td>
<td bgcolor="gren">
<p align="center"><font size="1"><b><input checked="checked" data-val="true" data-val-required="O campo bFevereiro é obrigatório." name="[3].EnvioPrestacao.bFevereiro" type="checkbox" value="true" /><input name="[3].EnvioPrestacao.bFevereiro" type="hidden" value="false" /></b></font></p>
</td>
<td bgcolor="red"><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bMarco é obrigatório." name="[3].EnvioPrestacao.bMarco" type="checkbox" value="true" /><input name="[3].EnvioPrestacao.bMarco" type="hidden" value="false" /></b></font></p> </td>
<td bgcolor="red"><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bAbril é obrigatório." name="[3].EnvioPrestacao.bAbril" type="checkbox" value="true" /><input name="[3].EnvioPrestacao.bAbril" type="hidden" value="false" /></b></font></p> </td>
<td bgcolor="red"><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bMaio é obrigatório." name="[3].EnvioPrestacao.bMaio" type="checkbox" value="true" /><input name="[3].EnvioPrestacao.bMaio" type="hidden" value="false" /></b></font></p> </td>
<td><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bJunho é obrigatório." name="[3].EnvioPrestacao.bJunho" type="checkbox" value="true" /><input name="[3].EnvioPrestacao.bJunho" type="hidden" value="false" /></b></font></p> </td>
<td><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bJulho é obrigatório." name="[3].EnvioPrestacao.bJulho" type="checkbox" value="true" /><input name="[3].EnvioPrestacao.bJulho" type="hidden" value="false" /></b></font></p> </td>
<td><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bAgosto é obrigatório." name="[3].EnvioPrestacao.bAgosto" type="checkbox" value="true" /><input name="[3].EnvioPrestacao.bAgosto" type="hidden" value="false" /></b></font></p> </td>
<td><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bSetembro é obrigatório." name="[3].EnvioPrestacao.bSetembro" type="checkbox" value="true" /><input name="[3].EnvioPrestacao.bSetembro" type="hidden" value="false" /></b></font></p> </td>
<td><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bOutubro é obrigatório." name="[3].EnvioPrestacao.bOutubro" type="checkbox" value="true" /><input name="[3].EnvioPrestacao.bOutubro" type="hidden" value="false" /></b></font></p> </td>
<td><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bNovembro é obrigatório." name="[3].EnvioPrestacao.bNovembro" type="checkbox" value="true" /><input name="[3].EnvioPrestacao.bNovembro" type="hidden" value="false" /></b></font></p> </td>
<td><p align="center"><font size="1"><b><input data-val="true" data-val-required="O campo bDezembro é obrigatório." name="[3].EnvioPrestacao.bDezembro" type="checkbox" value="true" /><input name="[3].EnvioPrestacao.bDezembro" type="hidden" value="false" /></b></font></p> </td>
<td align="center" style="width: 20px">
<select class="form-control" data-val="true" data-val-number="The field TipoPendencia must be a number." name="[3].EnvioPrestacao.TipoPendencia"><option value="1">Cliente</option>
<option value="2">Produto</option>
<option selected="selected" value="3">Serviço</option>
</select>
</td>
<td style="width: 210px">
<p align="center">N/A</p>
</td>
</tr>
</tbody>
</table>
Summarizing: How to narrow the space between text and line margins in a table?
Here is a small example, but it illustrates what I'm trying to say.