Problem with margin-top css

Asked

Viewed 72 times

2

I’m trying to put a margin on my table, I did so:

.tab_dados {margin-top: 10px;}

And it works, the problem is when I put an input on top of it. It sticks to it. What can 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>

html css

1 answer

2


Is that it? If it is, I’ll explain it better...

.form-group {
    margin-bottom: 20px;
    position: relative;
    display: flex;
    height: 45px;
    float: left;
}
.control-label {
    opacity: 0.4;
    pointer-events: none;

    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;
margin-top:10px;
}
.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>

  • And like this, what you’ve changed?

  • This happens due to the use of position: Absolute. I removed .control-label the absolute position and put in the .form-group margin-bottom:20px;

  • ai that margin, covered the group, which contains the input...

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.