dron

Pricing Table на Uikit 3. Как сделать?

Recommended Posts

Всем привет. Никак не получается сверстать нормальную Pricing Table на Uikit 3. Я только вникаю в тему, поэтому, может еще не догоняю.
Пробую сделать на uk-flex + uk-table. Постоянно какие-то косяки то с адаптивностью, то с шириной, то с высотой колонок...

<div class="uk-flex uk-flex-center">
	<div class="uk-card uk-card-default">
		<table class="uk-table uk-table-divider bg1">
			<thead>
				<tr>
					<th>Тестовая таблица 1</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Поле 1</td>
				</tr>
				<tr>
					<td>Поле 2 пошире</td>
				</tr>
				<tr>
					<td>Поле 3 еще шире чем поле 1 и 2</td>
				</tr>
				<tr>
					<td>Тестируем поле 4, которое воообще широкое</td>
				</tr>
				<tr>
					<th>100008 руб</th>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="uk-card uk-card-default uk-margin-left">
		<table class="uk-table uk-table-divider bg1">
			<thead>
				<tr>
					<th>Тестовая таблица 2, таблица 2, таблица 3</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Поле 1</td>
				</tr>
				<tr>
					<td>Поле 2</td>
				</tr>
				<tr>
					<td>Поле 3</td>
				</tr>
				<tr>
					<td>Поле 4</td>
				</tr>
				<tr>
					<td>А тут есть еще поле 4</td>
				</tr>
				<tr>
					<td>А еще поле 6, которое шире других</td>
				</tr>
				<tr>
					<th>12 000 ₽</th>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="uk-card uk-card-default uk-margin-left">
		<table class="uk-table uk-table-divider bg1">
			<thead>
				<tr>
					<th>А тут таблица номер 3</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Поле 1</td>
				</tr>
				<tr>
					<td>Широкое поле 2 из таблицы 3</td>
				</tr>
				<tr>
					<td>Поле 1</td>
				</tr>
				<tr>
					<td>Поле 1</td>
				</tr>
				<tr>
					<td>Поле 1</td>
				</tr>
				<tr>
					<td>Поле 1</td>
				</tr>
				<tr>
					<th>9 000 ₽</th>
				</tr>
			</tbody>
		</table>
	</div>
</div>


И как на зло не могу ничего найти подходящего уже готового. Ни в шаблонах на Uikit, ни в документации... Кто-то верстал Pricing Table на Uikit 3? Можете помочь, показать свой код?

Заранее спасибо!

price-tab.png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Elizavetk_a
      Здравствуйте!
      Возникла проблема с реализацией одной идеи.
      Есть интерактивный объект с возможностью прокрутки городов. И есть фотографии, сделанные в виде  cards bootstrap 4. Необходимо, чтобы при выборе города выделялись определенные фотографии. Можете подсказать, как можно это реализовать в верстке, какие материалы изучить?
      Схематический рисунок прикреплен ниже. 
      Заранее спасибо)

    • By РоманФ
      Нужен наставник, интересует верстка, устал искать разрозненные знания в интернете.
      Естественно не бесплатно.
      Со своей стороны знаю где и как брать реальные заказы, (не про биржи фриланса). Уже работаю с заказчиками приходится использовать Addobe Muse, WordPress, параллельно работаю директологом.
      Ты научишь меня верстке. Если ты просто знаешь как верстать, и делаешь это хорошо и усидчиво, я помогу монетизировать тебе твои знания, а ты научишь меня верстке.
       
       
  • Member Statistics

    46,699
    Total Members
    3,128
    Most Online
    Dmitry3258
    Newest Member
    Dmitry3258
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.