• Resolved Сергей

    (@derevnya)


    I decided to temporarily use the following table code!
    How can I specify horizontal movement if there is a lot of text?

    I will place the table code on the product page! In the field of a long description.

    <table>
    <tbody>
    <tr>
    <td>Тип размещения</td>
    <td style=”text-align: center;”>Люкс с видом на море</td>
    <td style=”text-align: center;”>Семейный люкс</td>
    <td style=”text-align: center;”>Делюкс с собственной террасой</td>
    <td style=”text-align: center;”>Двухместный номер с двумя раздельными кроватями (с балконом)</td>
    <td></td>
    </tr>
    <tr>
    <td>Цена – сутки/месяц</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>Вместительность</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>Площадь номера</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>Балкон</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>С кухней</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>Особенность номера</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>Скидки</td>
    <td>5% при втором бронирование на сайте ДЕРЕВНЯ.РФ</td>
    <td>5% при втором бронирование на сайте ДЕРЕВНЯ.РФ</td>
    <td>5% при втором бронирование на сайте ДЕРЕВНЯ.РФ</td>
    <td>5% при втором бронирование на сайте ДЕРЕВНЯ.РФ</td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td style=”text-align: center;”><span style=”color: #008000;”>ЗАБРОНИРОВАТЬ</span></td>
    <td style=”text-align: center;”><span style=”color: #008000;”>ЗАБРОНИРОВАТЬ</span></td>
    <td style=”text-align: center;”><span style=”color: #008000;”>ЗАБРОНИРОВАТЬ</span></td>
    <td style=”text-align: center;”><span style=”color: #008000;”>ЗАБРОНИРОВАТЬ</span></td>
    <td></td>
    </tr>
    <tr>
    <td>В номере</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td>Ванная комната</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td>Питание/кафе/ресторан</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td>Детская кровать, дополнительное спальное место</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td>Кондиционер</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td>Вид из окна</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td>Стиральная машина/прачечная</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td>Услуги по уборке</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td>Парковка</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td>Интернет</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td>Баня/сауна</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td>Бассейн</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td>Парковка</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td>Предоплата</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td>Отмена бронирования</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td>Врач/Аптека</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td>Площадка для отдыха</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td>Площадка для барбекю/мангала/летняя кухня</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td>Спорт</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td>Трансфер</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td>Достопримечательности/Экскурсии</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td>Для гостей с ограниченными возможностями</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td>С Домашними животными</td>
    <td colspan=”6″></td>
    </tr>
    </tbody>
    </table>

Viewing 15 replies - 1 through 15 (of 20 total)
  • Plugin Support Job a11n

    (@jobthomas)

    Automattic Happiness Engineer

    Hey @derevnya – do I understand it correctly that you want to add this to the body of the long description (it seems that you’re fine with doing that), but then also want to make sure that you’re listing that below each other when looking at it on small devices?

    If so, I’d suggest adding a class to the table and then adding custom CSS to do this. Here’s a great tutorial on how to do that: https://css-tricks.com/accessible-simple-responsive-tables/

    Thread Starter Сергей

    (@derevnya)

    I’m not sure! Does this code look like a table code?

    <p class=”codepen” data-height=”265″ data-theme-id=”dark” data-default-tab=”css,result” data-user=”davatron5000″ data-slug-hash=”XdwLbp” style=”height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;” data-pen-title=”Responsive Product Comparison Table”>
    <span>See the Pen
    Responsive Product Comparison Table
    by Dave Rupert (@davatron5000)
    on CodePen.</span>
    </p>
    <script async src=”https://static.codepen.io/assets/embed/ei.js”></script&gt;

    Thread Starter Сергей

    (@derevnya)

    Where to insert CSS ?

    @derevnya what @jobthomas is saying to do is add a simple class like this.

    <table class="dervnyas-table"> and do the same for each level of your table’s sections. For example “Вместительность” would be inside a TD

    So
    <td class="Вместительность-строка">

    for every section inside your table’s TD do that. Do not try and add JS to this unless you are really comfy adding JS to a WP site.

    You’ll want to always add it to either Additional CSS (which I can’t stand personally, meh horrible interface) or if your working from your child theme create a custom.css file and add it there.

    Thread Starter Сергей

    (@derevnya)

    <h1>Hello World!</h1>
    <table class=”Описание”>
    <tbody class=”>
    <tr>
    <td class=”Тип размещения></td>
    <td style=”text-align: center;”>Люкс с видом на море</td>
    <td style=”text-align: center;”>Семейный люкс</td>
    <td style=”text-align: center;”>Делюкс с собственной террасой</td>
    <td style=”text-align: center;”>Двухместный номер с двумя раздельными кроватями (с балконом)</td>
    <td style=””></td>
    </tr>
    <tr>
    <td class=”Цена – сутки/месяц”></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td class=”Вместительность”></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td class=”Площадь номера”</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td class=”Балкон”</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td class=”С кухней”</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td class=”Особенность номера”</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td class=”Скидки”</td>
    <td>5% при втором бронирование на сайте ДЕРЕВНЯ.РФ</td>
    <td>5% при втором бронирование на сайте ДЕРЕВНЯ.РФ</td>
    <td>5% при втором бронирование на сайте ДЕРЕВНЯ.РФ</td>
    <td>5% при втором бронирование на сайте ДЕРЕВНЯ.РФ</td>
    <td></td>
    </tr>
    <tr>
    <td style=”text-align: center;”><span style=”color: #008000;”>ЗАБРОНИРОВАТЬ</span></td>
    <td style=”text-align: center;”><span style=”color: #008000;”>ЗАБРОНИРОВАТЬ</span></td>
    <td style=”text-align: center;”><span style=”color: #008000;”>ЗАБРОНИРОВАТЬ</span></td>
    <td style=”text-align: center;”><span style=”color: #008000;”>ЗАБРОНИРОВАТЬ</span></td>
    <td></td>
    </tr>
    <tr>
    <td class=”В номере”</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Ванная комната”</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Питание/кафе/ресторан”</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Детская кровать, дополнительное спальное место”</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Кондиционер”</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Вид из окна”</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Стиральная машина/прачечная”</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Услуги по уборке”</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Парковка”</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Интернет”</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Баня/сауна”</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Бассейн”</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Парковка”</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Предоплата”</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Отмена бронирования”</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Врач/Аптека”</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”>Площадка для отдыха”</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Площадка для барбекю/мангала/летняя кухня”</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Спорт”</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Трансфер”</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Достопримечательности/Экскурсии”</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Для гостей с ограниченными возможностями”</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”С Домашними животными”</td>
    <td colspan=”6″></td>
    </tr>
    </tbody>
    </table>

    Yes, but don’t use a – unless it is together. example-example not example – example

    Thread Starter Сергей

    (@derevnya)

    How can I specify horizontal movement if there is a lot of text?

    I will place the table code on the product page! In the field of a long description.

    <table class=”Описание”>
    <tbody class=”"”>
    <tr>
    <td class=”"Тип”></td>
    <td style=”text-align: center;”>Люкс с видом на море</td>
    <td style=”text-align: center;”>Семейный люкс</td>
    <td style=”text-align: center;”>Делюкс с собственной террасой</td>
    <td style=”text-align: center;”>Двухместный номер с двумя раздельными кроватями (с балконом)</td>
    <td></td>
    </tr>
    <tr>
    <td class=”Цена – сутки/месяц”>Цена – сутки/месяц</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td class=”Вместительность”>Вместительность</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td class=”Площадь номера”>Площадь номера</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td class=”Балкон”>Балкон</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td class=”С кухней”>С кухней</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td class=”Особенность номера”>Особенность номера</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td class=”Скидки”>Скидки</td>
    <td>5% при втором бронирование на сайте ДЕРЕВНЯ.РФ</td>
    <td>5% при втором бронирование на сайте ДЕРЕВНЯ.РФ</td>
    <td>5% при втором бронирование на сайте ДЕРЕВНЯ.РФ</td>
    <td>5% при втором бронирование на сайте ДЕРЕВНЯ.РФ</td>
    <td></td>
    </tr>
    <tr>
    <td class=””></td>
    <td style=”text-align: center;”><span style=”color: #008000;”>ЗАБРОНИРОВАТЬ</span></td>
    <td style=”text-align: center;”><span style=”color: #008000;”>ЗАБРОНИРОВАТЬ</span></td>
    <td style=”text-align: center;”><span style=”color: #008000;”>ЗАБРОНИРОВАТЬ</span></td>
    <td style=”text-align: center;”><span style=”color: #008000;”>ЗАБРОНИРОВАТЬ</span></td>
    <td></td>
    </tr>
    <tr>
    <td class=”В номере”>В номере</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Ванная комната”>Ванная комната</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Питание/кафе/ресторан”>Питание/кафе/ресторан</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Детская кровать, дополнительное спальное место”>Детская кровать, дополнительное спальное место</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Кондиционер”>Кондиционер</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Вид из окна”>Вид из окна</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Стиральная машина/прачечная”>Стиральная машина/прачечная</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Услуги по уборке”>Услуги по уборке</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Парковка”>Парковка</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Интернет”>Интернет</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Баня/сауна”>Баня/сауна</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Бассейн”>Бассейн</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Парковка”>Парковка</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Предоплата”>Предоплата</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Отмена бронирования”>Отмена бронирования</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Врач/Аптека”>Врач/Аптека</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”"”>Площадка для отдыха</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Площадка для барбекю/мангала/летняя кухня”>Площадка для барбекю/мангала/летняя кухня</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Спорт”>Спорт</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Трансфер”>Трансфер</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Достопримечательности/Экскурсии”>Достопримечательности/Экскурсии</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”Для гостей с ограниченными возможностями”>Для гостей с ограниченными возможностями</td>
    <td colspan=”6″></td>
    </tr>
    <tr>
    <td class=”С Домашними животными”>С Домашними животными</td>
    <td colspan=”6″></td>
    </tr>
    </tbody>
    </table>

    @derevnya you don’t need to keep adding the table. In mobile the rows will scroll horizontally while the section head stays put.

    Thread Starter Сергей

    (@derevnya)

    So now put a style rule of max-width:100%; or for the width of that field in desktop

    Thread Starter Сергей

    (@derevnya)

    Does not work

    <table class=”Описание”> {
    width: 100%; /* Ширина таблицы */
    }
    div {
    max-width: 1000px; /* Ограничиваем ширину таблицы */
    }

    <tbody class=”"”>
    <tr>
    <td class=”"Тип”></td>
    <td style=”text-align: center;”>Люкс с видом на море</td>
    <td style=”text-align: center;”>Семейный люкс</td>
    <td style=”text-align: center;”>Делюкс с собственной террасой</td>
    <td style=”text-align: center;”>Двухместный номер с двумя раздельными кроватями (с балконом)</td>
    <td></td>
    </tr>

    Meh, please read exactly what I said earlier. You do not add a style like this.

    Thread Starter Сергей

    (@derevnya)

    <div style= “max-width:100%;”>

    Thread Starter Сергей

    (@derevnya)

    Does not work

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘Code’ is closed to new replies.