CODEWITHSUNDEEP
htmlcssgoogle-chromecross-browser
Horen
Horen

Reputation: 11382

Google Chrome: Zero width table cells use up space

I have a table with three <td />. Two of them have width attributes and styles of 0px.
The middle <td /> has no explicit width set.

JsFiddle here

<table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tbody>
        <tr>
            <td width="0" height="10" bgcolor="" style="background-color:#00ffff;height:10px;width:0px;"></td>
            <td height="10" bgcolor="" style="background-color:#000;height:10px;"></td>
            <td width="0" height="10" bgcolor="" style="background-color:#ff00ff;height:10px;width:0px;"></td>
        </tr>
    </tbody>
</table>

I would expect that this middle <td /> would take up the entire space (and this is what happens in Firefox and IE)

However, in Google Chrome, the three <td /> all take up the same space.

1. Why is this?
2. Is this a bug in Chrome?
3. Is there an easy fix?

Upvotes: 2

Views: 1456

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

Browsers have always been inconsistent in allocating column widths in tables when some widths are set but they do not unambiguously define all the widths.

In this case, the table has a width of 100% and two of the columns a width of 0. However, the width setting for a table cell sets just the minimum width, and browsers may allocate wider cells (columns) to satisfy a width setting for the entire table.

Here the solution is simple: just add width: 100% to the style settings of the middle cell.

Upvotes: 1

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13978

It looks like Firefox and IE have the default property "table-layout:fixed" for tables. But Chrome doesn't have this as a default property. So we need to force this in chrome like below.

 table {
border-collapse: collapse;
border-spacing: 0;
-webkit-border-horizontal-spacing: 0px; 
-webkit-border-vertical-spacing: 0px;
table-layout:fixed;
}

DEMO

Upvotes: 5

Related Questions