• 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 5 replies - 16 through 20 (of 20 total)
  • ?? create a custom.css file or even better since you’re struggling please add the styles to Additional CSS

    The clssses that you created are the selectors you will style.

    I cannot give you anymore advice. Class dismissed. ??

    Thread Starter Сергей

    (@derevnya)

    I do not understand how it works. I have already tried everything!

    I’m sorry. @jobthomas gave you a page to learn from. I advise you read it and learn or hire a developer. This is outside the terms of support.

    Plugin Support Job a11n

    (@jobthomas)

    Automattic Happiness Engineer

    @derevnya as @serafinnyc confirmed, this isn’t just a simple line of CSS you’re requesting, but a full on understanding of how CSS works. There are some great tutorials out there.

    The one I shared earlier is great once you’ve done the basic stuff, but if you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

    As a short summary starter: HTML looks at the structure of your page. CSS is a way to add styling to that page without having to add it to every single element. If you work with inline styling, you’re setting yourself up for very messy code.

    There are also great paid tutorials out there. I’ve followed some CSS courses on Team Treehouse myself and really enjoyed those, but there are many other providers with great materials.

    Given that this is outside the scope of this forum, I’ll be marking this thread as resolved.

    Thread Starter Сергей

    (@derevnya)

    .dataTable {
    display: block;
    width: 100%;
    margin: 1em 0;
    }

    .dataTable thead, .dataTable tbody, .dataTable thead tr, .dataTable th {
    display: block;
    }

    .dataTable thead {
    float: left;
    }

    .dataTable tbody {
    width: auto;
    position: relative;
    overflow-x: auto;
    }

    .dataTable td, .dataTable th {
    padding: .625em;
    line-height: 1.5em;
    border-bottom: 1px dashed #ccc;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    }

    .dataTable th {
    text-align: left;
    background: rgba(0, 0, 0, 0.14);
    border-bottom: 1px dashed #aaa;
    }

    .dataTable tbody tr {
    display: table-cell;
    }

    .dataTable tbody td {
    display: block;
    }

    .dataTable tr:nth-child(odd) {
    background: rgba(0, 0, 0, 0.07);
    }

    @media screen and (min-width: 50em) {

    .dataTable {
    display: table;
    }

    .dataTable thead {
    display: table-header-group;
    float: none;
    }

    .dataTable tbody {
    display: table-row-group;
    }

    .dataTable thead tr, .dataTable tbody tr {
    display: table-row;
    }

    .dataTable th, .dataTable tbody td {
    display: table-cell;
    }

    .dataTable td, .dataTable th {
    width: auto;
    }

    }

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