Всем привет! Помогите решить проблему Если смотреть с телефона, то страницы с таблицами (пример страницы) некорректно отображаются - не видны цены. При чем на некоторых, где экран больше отображается нормально, а на экранах меньше цены не видно Нашла где в CSS прописаны эти таблицы, вот код: Код: } .tour_table { width: 100% !important; border-spacing: 0px !important; table-layout: auto !important; color: #1B3549 !important; margin: 10px 0px; border: none !important; border-collapse: separate !important; } .tour_table tr { height: auto !important; } .tour_table_wrap { margin: 0 auto!important; } .tour_table_wrap,.jspPane { overflow-x: visible !important; overflow-y:hidden; } .tour_table tr:hover td { background: #EBEDEC; } .tour_table th { background: #CFCFCF; height: 34px !important; text-align: center; padding: 5px 10px !important; font-size: 16px; color: #000000; font-weight: normal; border: none; border-bottom: 2px solid #fff; padding: 0; } .tour_table p { text-indent: 0; } .tour_table td:first-child,.tour_table th:first-child { -webkit-border-radius: 10px 0px 0px 10px; border-radius: 10px 0px 0px 10px; text-align: left; Что и где необходимо исправить?
У таблиц проблемы с адаптивность. Есть несколько вариантов, как сделать. Первый, использовать горизонтальную прокрутки на небольших экранах. Вставьте код перед таблицей HTML: <div class="table-wrap"> <table class="table-1"> Вторая строчка, это уже сама таблица, на странице примера код будет выглядеть так HTML: <div class="table-wrap"> <table class="table-1 tour_table" style="width: 400px;"> и дальше строки таблицы. После таблицы, тега </table> вставьте закрывающий тег </div>. В CSS вставить код Код: .table-wrap{ overflow-x:auto; } table.table-1 { border-collapse: collapse; border-spacing: 0; width: 100%; } table.table-1 tr { background-color: #f8f8f8; } table.table-1 th, table.table-1 td { text-align: left; padding: 8px; border: 1px solid #ddd; } table.table-1 th{ font-weight: bold; } Второй - изменить вывод на небольших экранах. Помимо добавления класса к таблице, Вам надо будет заменить в первой строчке теги <td> на <th>, код начала таблицы будет выглядеть так HTML: <table class="table-3"> <thead> <tr> <th> <p><span style="font-size: 10pt;"><strong>Кол-во</strong></span></p> <p><span style="font-size: 10pt;"><strong>школьников</strong></span></p> </th> <th> <p><span style="font-size: 10pt;"><strong>Кол-во сопровождающих </strong></span></p> <p><span style="font-size: 10pt;"><strong>бесплатно</strong></span></p> </th> <th> <p><span style="font-size: 10pt;"><strong>Стоимость,</strong></span></p> <p><span style="font-size: 10pt;"><strong>руб./чел.</strong></span></p> </th> </tr> </thead> И в CSS добавить Код: table.table-3 { border-collapse: collapse; border-spacing: 0; width: 100%; } table.table-3 tr { background-color: #f8f8f8; } table.table-3 th, table.table-3 td { text-align: left; padding: 8px; border: 1px solid #ddd; } @media screen and (max-width: 600px) { table.table-3 { border: 0; } table.table-3 thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } table.table-3 tr { border-bottom: 1px solid #ddd; display: block; margin-bottom: 30px; } table.table-3 td { display: block; text-align: right; } table.table-3 td::before { content: attr(data-label); float: left; font-weight: bold; text-transform: uppercase; } table.table-3 td:last-child { border-bottom: 0; } } Ну и самый простой, замените во втором столбце слово "сопровождающих" на более короткое, или на его сокращение, тогда строки таблицы станут уже и таблица будет влезать в экран.