I'm trying to put a margin on my table, I did so:
.tab_dados {margin-top: 10px;}
And it works, the problem and when I put an input on it. He sticks to her. What can it be?
.form-group {
margin-top: 20px;
position: relative;
display: flex;
height: 45px;
float: left;
}
.control-label {
opacity: 0.4;
pointer-events: none;
position: absolute;
transform: translate3d(5px, 22px, 0) scale(1);
transform-origin: left top;
transition: 240ms;
}
.form-group.focused .control-label, .form-group-select.focused .control-label {
opacity: 1;
transform: scale(0.75);
}
.form_campos {
height: 31px;
width: 100%;
color: #484848;
align-self: flex-end;
padding: 5px;
outline: none;
border: 0 solid #484848;
border-bottom-width: 1px;
background: transparent;
border-radius: 0;
}
.form_campos:hover, .form_campos:focus {
border-color: #0091FF;
}
.form_disabled, .form_disabled:hover, .form_disabled:focus {
border-color: #D7D7D7;
}
.tab_dados {
width: 100%;
border-collapse: collapse;
text-align: center;
}
.tab_dados a {
color: #484848;
text-decoration: none;
}
.tab_dados th {
background: #0091FF;
color:#FFFFFF;
font-style: italic;
}
.tab_dados tr {
height: 50px;
border-bottom: 1px solid #D5D5D5;
}
.tab_dados tr:nth-child(odd) {
background: #F7F7F7;
}
.tab_dados tr:nth-child(even) {
background: #FFFFFF;
}
.tab_dados tr:hover {
background: #F1F1F1;
}
tfoot tr td{
border:0;
height: 40px;
}
.tfoot{
width: 100%;
}<div class="rows">
<div class='form-group column column-7'>
<label class='control-label' for='inputNormal'>FILTRO*</label>
<input type='text' class='form_campos' id='inputNormal' name='text_busca'>
</div>
</div>
<!-- TABELA -->
<table class="tab_dados">
<tr>
<th>IDADE</th>
<th>NOME</th>
<th>CIDADE</th>
<th>ESTADO</th>
</tr>
<tr id='1'>
<td>25</td>
<td>xxxxxxx</td>
<td>xxxxxx</td>
<td>xxxxx</td>
</tr>
</table>
<!-- TABELA FOOT-->
<table>
<tfoot>
<tr>
<td>Total exibido: 1</td>
</tr>
</tfoot>
</table>