html - How to get my <td> act like <tr> -
hi i'm trying make table responsive , need responsive , stack within each other table row
html
<html > <head> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="teststyles.css"> <!--[if lt ie 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!--[if lt ie 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> <link href="media-queries.css" rel="stylesheet" type="text/css"> </head> <body> <table> <tr> <td> <p> stuff </p> </td> <td > <p> stuff </p> </td> <td > <p> stuff </p> </td> </tr> </table> </body> </html>
css
table{ width: 990px; margin: 0 auto; } tr{ display:table; width:100%; } td{ display:table-row; background:#efefef; }
so thought table-row makes element behave table row reason not stacking one. ideas or tips?
edit:
looks when open on regular html when open on fiddle it's great
you need doctype in html file. first line should be:
<!doctype html>
Comments
Post a Comment