Why doesn’t the table on my phone want to appear as on a computer? On the Google Chrome computer, on the FireFox phone, everything is fresh.

CSS:

table { border-collapse: collapse; } input[type="image"] { max-width: 100%; }

HTML:

 <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css" /> <link href="css/menu.css" rel="stylesheet" type="text/css"/> <link href="css/mytable.css" rel="stylesheet" type="text/css"/> </head> <body> <nav class="navbar navbar-new" role="navigation" > <div class="container-fluid"> <!-- logo --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Меню</a> </div> <!-- menu --> <div class="collapse navbar-collapse navbar-right" id="navbar1"> <ul class="nav navbar-nav"> <li class="active"><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </div> </div> </nav> <div class="row" style=" margin-right: 0; margin-left: 0; "> <div class="col-xs-4" style=" width: 100%; "> <table border="1" cellpadding="7" cellspacing="0"> <tr> <td><input type="image" src="images/star.png" name="имя"></td> <td><input type="image" src="images/star.png" name="имя"></td> <td><input type="image" src="images/star.png" name="имя"></td> <td><input type="image" src="images/star.png" name="имя"></td> <td><input type="image" src="images/star.png" name="имя"></td> <td><input type="image" src="images/star.png" name="имя"></td> </tr> </table> </div> </div> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/bootstrap.js" type="text/javascript"></script> </body> </html>

Computer :

enter image description here

Phone :

enter image description here

  • for firefox, you must input [type = "image"] {max-width: 100%; width: 100%; } - jsfiddle.net/st6xssxL - soledar10 pm
  • and how to make css switch for each browser separately, so that this site works in chrome and in firefox - alex-rudenkiy
  • why separately? in this case, write what I wrote above will work in chrome and firefox - soledar10
  • @ soledar10 Well, on a computer in firefox everything is ok, and on the phone, sadness is trouble ((( - alex-rudenkiy
  • @ alex-rudenkiy Made a test page from your code. On my iphone and laptop it works well. If it looks right on your phone, then you need a link to your page to solve the problem. Or add to the question the contents of css/menu.css and css/mytable.css . - Gleb Kemarsky

0