Как разместить 3 маленькие таблицы в одну строку?

Решено gulshatkakutueva
(@gulshatkakutueva)

6 лет, 8 месяцев назад

Доброго времени суток! Создала 6 таблиц в TablePress, они маленькие(по 2столбца). Как мне разместить 3 маленькие таблицы в одну строку, следующие 3 в другую строку и чтобы они не были такими большими как сейчас? (Примерно как на сайте прядки в порядке мне надо)

Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]

Просмотр 12 ответов — с 1 по 12 (всего 12)

(@flector)

пальцем ткните.
ибо я ничего подобного на указанном сайте не вижу.

а вообще, размещать таблицы в таблицах очень плохая идея — сдается мне, что на мобильных все расплывется и будет выглядеть кучей мусора.

Автор

gulshatkakutueva

(@gulshatkakutueva)

6 лет, 8 месяцев назад

не хочу я таблицы в таблицах размещать, мне надо чтобы 3таблицы рядом друг с другом стояли, а не так чтоб друг под другом в один столбец

Flector

(@flector)

6 лет, 8 месяцев назад


<div style="flex-wrap:wrap;display:flex;">

<table style="width:250px!important;">
код таблицы
</table>

<table style="width:250px!important;">
код таблицы
</table>

<table style="width:250px!important;">
код таблицы
</table>

</div>

будут таблицы располагаться в ряд. если места достаточно.

Автор

gulshatkakutueva

(@gulshatkakutueva)

6 лет, 8 месяцев назад

это надо писать в css пользователя в TablePress? Если у меня там Стиль CSS такой, то куда его приписать?

table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
border-radius: 10px;
border-spacing: 0;
text-align: center;
}
th {
background: #BCEBDD;
color: white;
text-shadow: 0 1px 1px #2D2020;
padding: 10px 20px;
}
th, td {
border-style: solid;
border-width: 0 1px 1px 0;
border-color: white;
}
th:first-child, td:first-child {
text-align: left;
}
th:first-child {
border-top-left-radius: 10px;
}
th:last-child {
border-top-right-radius: 10px;
border-right: none;
}
td {
padding: 10px 20px;
background: #F8E391;
}
tr:last-child td:first-child {
border-radius: 0 0 0 10px;
}
tr:last-child td:last-child {
border-radius: 0 0 10px 0;
}
tr td:last-child {
border-right: none;
}

Ответ изменён 6 лет, 8 месяцев назад пользователем gulshatkakutueva.

Flector

(@flector)

6 лет, 8 месяцев назад

нет, это в запись (в режиме текста).
аля:


<div style="flex-wrap:wrap;display:flex;">

[шорткод таблицы 1]

[шорткод таблицы 2]

[шорткод таблицы 3]

</div>

а в стилях tablepress прописать:


table {
width:250px!important;
font-family: «Lucida Sans Unicode», «Lucida Grande», Sans-Serif;
font-size: 14px;
border-radius: 10px;
border-spacing: 0;
text-align: center;
}

Автор

gulshatkakutueva

(@gulshatkakutueva)

6 лет, 8 месяцев назад

не помогло((( все равно все таблицы в один ряд

Автор

gulshatkakutueva

(@gulshatkakutueva)

6 лет, 8 месяцев назад

ааааа, помогло!!! я не туда писала. только вот теперь опять вопрос: как теперь вторую партию таблиц правильно разместить чтобы 4я под 1м, 5я под 2м, 6я под 3м был и чтобы сильно расстояния не было между верхними и нижними таблицами

Автор

gulshatkakutueva

(@gulshatkakutueva)

6 лет, 8 месяцев назад

вот на другом сайте, как я поняла, как блоками они размещены. мне примерно так же надо

<div class="pricing">
			<!--<pre>-->
<!--</pre>-->
	<div class="pricing-block big_block" id="bx_1847241719_143">
		<div class="title pricing_title">
			<div class="icon icon-girl">
				<a href="#" data-pk="143">Женский зал</a>
			</div>
		</div>
				
    <table>
                                <tbody><tr>
            <td>Короткие волосы</td>
            <td>350р</td>
        </tr>
                                <tr>
            <td>Средние/длинные волосы</td>
            <td>450р</td>
        </tr>
                                <tr>
            <td>Укладка волос</td>
            <td>400/750/750р</td>
        </tr>
                                <tr>
            <td>Маска для волос</td>
            <td>200р</td>
        </tr>
                                <tr>
            <td>Молекулярный коктейль от MATRIX</td>
            <td>250р</td>
        </tr>
                                <tr>
            <td>Прическа</td>
            <td>1100р</td>
        </tr>
                                <tr>
            <td>Плетение</td>
            <td>300р</td>
        </tr>
                                <tr>
            <td>Цветные пряди (1 прядь)</td>
            <td>100р</td>
        </tr>
                                <tr>
            <td>Окрашивание/тонирование (1 тон) ESTEL</td>
            <td>800/1200/1500р</td>
        </tr>
                                <tr>
            <td>Окрашивание/тонирование (1 тон) MATRIX</td>
            <td>950/1500/1800р</td>
        </tr>
            </tbody></table>
	</div>
	<div class="pricing-block small_block" id="bx_1847241719_142">
		<div class="title pricing_title">
			<div class="icon icon-moustache">
				<a href="#" data-pk="142">Мужской зал</a>
			</div>
		</div>
				
    <table>
                                <tbody><tr>
            <td>Бокс/полубокс/спортивная/окантовка с переходом</td>
            <td>210р</td>
        </tr>
                                <tr>
            <td>Молодежная/Модельная/Теннис</td>
            <td>310р</td>
        </tr>
                                <tr>
            <td>Креатив</td>
            <td>450р</td>
        </tr>
                                <tr>
            <td>Наголо</td>
            <td>100р</td>
        </tr>
                                <tr>
            <td>Оформление бороды</td>
            <td>150р</td>
        </tr>
                    </tbody></table>
	</div>
	<div class="pricing-block small_block last-in-line" id="bx_1847241719_141">
		<div class="title pricing_title">
			<div class="icon icon-boy">
				<a href="#" data-pk="141">Детский зал до 7 лет</a>
			</div>
		</div>
				
    <table>
                                <tbody><tr>
            <td>Спортивная</td>
            <td>200р</td>
        </tr>
                                <tr>
            <td>Модельная</td>
            <td>270р</td>
        </tr>
                                <tr>
            <td>Креативная</td>
            <td>350р</td>
        </tr>
                                <tr>
            <td>Креативная со сложным рисунком</td>
            <td>500р</td>
        </tr>
                                <tr>
            <td>Прическа</td>
            <td>700р</td>
        </tr>
            </tbody></table>
	</div>
	<div class="pricing-block small_block bottom" id="bx_1847241719_140">
		<div class="title pricing_title">
			<div class="icon icon-bottle">
				<a href="#" data-pk="140">Маникюр</a>
			</div>
		</div>
				
    <table>
                                <tbody><tr>
            <td>Маникюр+покрытие лаком</td>
            <td>450р</td>
        </tr>
                                <tr>
            <td>Маникюр женский</td>
            <td>300р</td>
        </tr>
                                <tr>
            <td>Маникюр+гель-лак</td>
            <td>790р</td>
        </tr>
                                <tr>
            <td>Педикюр женский</td>
            <td>800р</td>
        </tr>
                                <tr>
            <td>Педикюр на пальчики+гель-лак</td>
            <td>790р</td>
        </tr>
                    </tbody></table>
	</div>
	<div class="pricing-block small_block last-in-line bottom" id="bx_1847241719_139">
		<div class="title pricing_title">
			<div class="icon icon-sun">
				<a href="/solarium/" data-pk="139">Солярий</a>
			</div>
		</div>
				
    <table>
                                <tbody><tr>
            <td>Стоимость 1 минуты при разовом посещении</td>
            <td>15р</td>
        </tr>
                                <tr>
            <td>40 минут</td>
            <td>500р</td>
        </tr>
                                <tr>
            <td>100 минут</td>
            <td>1000р</td>
        </tr>
                                <tr>
            <td>200 минут</td>
            <td>1500р</td>
        </tr>
            </tbody></table>
	</div>
		</div>

Ответ изменён 6 лет, 8 месяцев назад пользователем gulshatkakutueva.

Flector

(@flector)

6 лет, 8 месяцев назад


<div style="flex-wrap:wrap;display:flex;">

[шорткод таблицы 1]

[шорткод таблицы 2]

[шорткод таблицы 3]

</div>
<div style="flex-wrap:wrap;display:flex;">

[шорткод таблицы 4]

[шорткод таблицы 5]

[шорткод таблицы 6]

</div>

Автор

gulshatkakutueva

(@gulshatkakutueva)

6 лет, 8 месяцев назад

так же написала, да они друг под другом, но между верхней и нижней таблицей разные расстояния (строки в таблицах разные). как сделать так чтобы они были все в одну кучку так сказать. расстояние между верхними и нижними у всех были одинаковые

Автор

gulshatkakutueva

(@gulshatkakutueva)

6 лет, 8 месяцев назад

поможет ли разбивка главной страицы на три колонки, а потом на плитки?

Автор

gulshatkakutueva

(@gulshatkakutueva)

6 лет, 8 месяцев назад

с помощью плагина Page Builder by SiteOrigin оформила страницу так, как надо мне. Спасибо, Flector, за попытку помочь

Просмотр 12 ответов — с 1 по 12 (всего 12)

Тема «Как разместить 3 маленькие таблицы в одну строку?» закрыта для новых ответов.

Как разместить 3 маленькие таблицы в одну строку?

Темы

Самые популярные темы

Темы без ответов

Без вопроса

Решённые

Нерешённые

Все темы