Добрый день! Подскажите пожалуйста, как исправить ситуацию?
Есть такая таблица, на мониторе смотрится отлично.
Когда просматриваю на телефоне, то получается это!
Таблица выезжает за край, хотя должно быть видно два столбика - это так называемая отзывчивая таблица!
<!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>
