CODEWITHSUNDEEP
htmlcss
Sergey
Sergey

Reputation: 5476

Table cells don't have an equal width with table-layout: fixed

I have a table that contains few columns. I need to columns have an equal width, so I use the following styles:

table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}
td {
    border: 1px solid green;
    box-sizing: border-box;
    padding: 0;
}

It works fine in FireFox and Internet Explorer but not in Google Chrome v.43.0.2357.130 m

I've created the fiddle - http://jsfiddle.net/6g4fmu5r/ that demonstrates this issue.

Upvotes: 1

Views: 645

Answers (2)

Leo the lion
Leo the lion

Reputation: 3065

After testing a lot things i got the solution..

please replace this code

table {
    border-collapse: collapse;
    width: 805px;
    table-layout: fixed;
}

to this

table {
    width: 805px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

and you will get all equal width td..:)

refference : Help

Upvotes: 1

Luckyn
Luckyn

Reputation: 563

You can see in this post that border-collapse doesn't work the same on Firefox and Chrome : Border Collapse differences in FF and Webkit

In Firefox border is only on 2 sides, table complete for top and left. If you check, you'll see that table have 804 width + 1px border left. OuterWidth include border, so you'll have 114+1px from right for all td.

In Chrome td have 1px on all side but superpose (0 on table). Table is also reduce to 804 width, but no border is add... So Chrome need to reduce 1 td to get the correct width.

Upvotes: 1

Related Questions