Search code examples
htmlcssgoogle-chromedoctype

Table td display block not working on Chrome

I have a table, and I want make td to display block, it's ok on firefox and etc.. but not working on Chrome, I guess probably it's up to user agent stylesheet, even I put <!DOCTYPE html> before html tag but still not working, even important, it's look like override but actually it's read user agent stylesheet

<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>

in my page there is no more CSS and I didn't use bootstrap. any solution? i searched but all say it's <!DOCTYPE html> issue!

enter image description here

Solution

  • Your table should be display: table. If you're worried about the lining, try adding display:block to the child elements.

    The reason is that display: table creates the table layout mechanism , hence the rows and columns will be laid out properly;

    In certain conditions if the required elements aren't there, they will be implicitly created, but it can cause problems. (You can test that out by making a table layout with divs and setting them to display: table, table-row, table-cell, which are the default user agent styles for table, tr, and td elements. If you play around with unsetting the styles on the divs in different combinations, you'll see that sometimes the browser implicitly makes the table layout incorrectly.)

    So, always leave the display: table-* styles intact if you want an actual table layout. Sort out your lining issues using the appropriate styles for that.

    You can try spaning across several divs, and defining your child element in it, using colspan(on the td) and display:block (on the child-element).