Chrome-specific CSS issue setting table cell to display:block
css, google-chrome, html
Solution
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.
Problem
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: Here is a screenshot of chrome showing the display:block rule in the style tab but display:table-cell in the computed tab: