Jump to content

АлександрDog

Newbie
  • Posts

    4
  • Joined

  • Last visited

Everything posted by АлександрDog

  1. Ошибка была в метатеге, он отсутствует. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  2. Благодарю за ответ, сейчас попробую.
  3. Добрый день! Подскажите пожалуйста, как исправить ситуацию? Есть такая таблица, на мониторе смотрится отлично. Когда просматриваю на телефоне, то получается это! Таблица выезжает за край, хотя должно быть видно два столбика - это так называемая отзывчивая таблица! <!DOCTYPE html> <html> <head> <meta name="description" content="Демонстрация отзычивая таблица"> <meta name="keywords" content="пример, демо, отзычивая, таблица, CSS"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> </title> <style type="text/css"> .base {margin: 0 auto; max-width: 2000px; min-height: 100%; min-width: 0; padding: auto; position: relative; } </style> <style type="text/css"> table {width: 100%; border-collapse: collapse; font-size: 12px; } /* Zebra striping */ tr:nth-of-type(odd) {background: #eee; } th {background: #333; color: white; font-weight: bold; } td, th {padding: 6px; border: 1px solid #ccc; text-align: left; } </style> <!--[if !IE]><!--> <style> @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { table, thead, tbody, th, td, tr { display: block; } thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border: 1px solid #ccc; } td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; } td:before { position: absolute; top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; } td:nth-of-type(1):before { content: "id"; } td:nth-of-type(2):before { content: "Дата"; } td:nth-of-type(3):before { content: "Страна"; } td:nth-of-type(4):before { content: "Город"; } td:nth-of-type(5):before { content: "Марка"; } td:nth-of-type(6):before { content: "Модель"; } td:nth-of-type(7):before { content: "Номер"; } td:nth-of-type(8):before { content: "Неисправность"; } td:nth-of-type(9):before { content: "Ремонт"; } td:nth-of-type(10):before { content: "Итог"; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { body { padding: 0; margin: 0; width: 320px; } } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { body { width: 495px; } } </style> <!--<![endif]--> </head> <body> <div class="base"> приветищще <div class="box-new"> <table> <thead> <tr> <th>id </th> <th>Дата </th> <th>Страна </th> <th>Город </th> <th>Марка </th> <th>Модель </th> <th>Номер </th> <th>Неисправность </th> <th>Ремонт </th> <th>Итог </th> </tr> </thead> <tbody> <tr> <td>Jokey</td> <td>Smurf</td> <td>Giving Exploding Presents</td> <td>Smurflow</td> <td>Smurf</td> <td>Smurflane Smurfmutt</td> <td>Smurfuary Smurfteenth, 1945</td> <td>New Smurf City</td> <td>4.Smurf</td> <td>One</td> </tr> <tr> <td>Cindy</td> <td>Beyler</td> <td>Sales Representative</td> <td>Red</td> <td>Wars</td> <td>Lori Quivey</td> <td>July 5, 1956</td> <td>Paris</td> <td>3.4</td> <td>3451</td> </tr> </tbody> </table> </div> </div> </body>
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy