CODEWITHSUNDEEP
htmlcssgoogle-chrome
AndyPerlitch
AndyPerlitch

Reputation: 4729

Chrome-specific CSS issue setting table cell to display:block

I found this question that seemingly had what I wanted. I am using chrome 32.0.1700.102 and even the fiddle on the first answer amazingly works fine for me.

However, when I put the following html into a new file and open it up in chrome, the "computed styles" tab of the tds still show display:table-cell; :

<html>
    <head>
        <style>
            #block td {
                display: block;
                background: #ccc;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>a</td>
                <td>b</td>
                <td>c</td>
                <td>d</td>
            </tr>
        </table>

        <table id="block">
            <tr>
                <td>a</td>
                <td>b</td>
                <td>c</td>
                <td>d</td>
            </tr>
        </table>
    </body>
</html>

When I open this in firefox, I get the desired result:

firefox vs chrome

Here is a screenshot of chrome showing the display:block rule in the style tab but display:table-cell in the computed tab:

enter image description here

Upvotes: 7

Views: 14366

Answers (3)

josh1978
josh1978

Reputation: 738

I always define the doctype, but this issue started occuring after the last Chrome update 45.0.2454.85 in my responsive design. The stacked table cells would render as a hybrid of table-cell and table-row after resizing the browser at responsive breakpoints (media queries), or when switching from portrait to landscape and back (if landscape didn't stack the table cells and portrait did). This bug occurs only when there are more than two table cells.

The solution: In the containing table row tr set it to display:table-cell.

table.classname tr { display:table-cell !important; }
table.classname td { display:block; width:100% !important; }

Upvotes: 1

get-it
get-it

Reputation: 11

I used display: block; in a galery situation, so no table, just an url with HP generated code.

display: block;, nor display table-cell worked for me (I don´t have a table!)

For me display: table; worked like a charm.

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157314

I don't see any DOCTYPE declared in the document, when you don't declare a doctype, Chrome overrides the display: block; with display: table-cell;

It works on JS Fiddle cuz they have doctype declared.

So use <!DOCTYPE html> at the very top of the document before <html> and it should fix the issue.

Upvotes: 27

Related Questions