Menu
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:
930
The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. Formally, the display property sets an element's inner and outer display types.
display : none; it used for deleting and recreating them. You can also consider inline-block : inline-block elements inline elements but they have a width and a height.
display: blockAn element that has the display property set to block starts on a new line and takes up the available screen width. You can specify the width and height properties for such elements. Examples of elements that are at block-level by default are <div> , <section> , <p> , and lots more.
The display property specifies the display behavior (the type of rendering box) of an element. In HTML, the default display property value is taken from the HTML specifications or from the browser/user default style sheet. The default value in XML is inline, including SVG elements.
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.
75
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; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
