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: enter image description here

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

Popular posts from this blog

google api - Incomplete response from Gmail API threads.list -

Installing Android SQLite Asset Helper -

Qt Creator - Searching files with Locator including folder -