Search code examples
cssstylesalignmentcentercss-tables

CSS Style on table aligns to center

After aplying the table styles, the tables are aligned to center, which they should not... Why?

I can provide an HTML file for the following page... Here's a screenshot: enter image description here enter image description here

    table.FLTT { 
        clear:both;
        width: 100%;
        margin: 0 auto;
        border-collapse: separate;
        border-spacing: 0;
        text-decoration: none;
        background: #fff;
        border:1px solid #dcdcdc;
        border-bottom:none;}

    table.FLTT th {
        background-color: #4D4D4d!important;
        color: #FFFFFF!important;
        padding: 10px 10px;
        text-decoration: none;
        transition: 0.0s;
        font-size: 13px;
        font-weight:normal;
        }

    table.FLTT td {
        padding: 5px 10px;
        border-bottom: 1px solid #dcdcdc;
        text-decoration: none;
        }

    table.FLTT tbody > tr:nth-child(odd) > td {
        background-color: #cccccc;
    }



    table.FLTT tbody tr:hover > td {
        background-color: #222222;
        color: #F0C237;
    }

    table.FLTT tr {
        text-decoration: none;
        -webkit-transition:all .5s ease;
        -moz-transition:all .5s ease;
        -o-transition:all .5s ease;
        transition:all .5s ease;}

    table.FLTT tr a {
        text-decoration: none;
        outline:none;
        color: #005689;
    }

    table.FLTT tr:hover a{
        background-color: #222222;
        color:#F0C237;
        text-decoration:underline;
    }

    table.FLTT tr.cat-list-row1 {
        background:#eee}

    table.FLTT thead th {
        color:#fff!important;
        background:#4D4D4d!important;}
Solution

  • In your table.FLIT{ } code you have mentioned as margin : 0 auto. Instead of this code the element will be centered in the parent element.

    In this margin property first value for distance from top ane second value for distance from left border. So auto will center that element.

    You can remove that property and set as

    margin : 0px 0px;

    Or add another property 

    float: left;