CSS Style on table aligns to center

80 Views Asked by At

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;}
3

There are 3 best solutions below

3
On BEST ANSWER

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;
0
On

The part margin: 0 auto; does that, in table.FLTT{ }. You should post some html code to be sure, and put it in context.

0
On

The style in table.FLTT{} there is margin: 0 auto;

It means the margin for top and bottom will assign to 0 and left and right will assign as auto center.

So please remove margin:0 auto;