Как создать такую таблицу?

318
24 июля 2017, 14:11

Подскажите, как создать такую таблицу, приведённую на рисунке?
В таблице разные по ширине колонки, и по разному прижат текст (влево, вправо, по центру).
Подскажите, как можно реализовать эту таблицу на flex?

Получается, что для каждой колонки отдельно нужно задавать ширину и выравнивание текста? Или тут нужно разделить ряд не три колонки:

  1. левая с изображением и названием
  2. центральная с кнопкой и артикулом и кодом
  3. правая с ценой

https://jsfiddle.net/c4tjn93L/ 

.form{ 
		.table{ 
			width: 100%; 
		} 
		.row{ 
			display: flex; 
			justify-content: space-between; 
			max-height: 119px; 
		} 
		.td{ 
			display: flex; 
		} 
		.item{ 
			display: flex; 
			justify-content: center; 
		} 
		.left{ 
			justify-content: flex-start; 
			width: 33.21%; 
			flex-basis: 33.21%; 
			max-width: 373px; 
		} 
		.right{ 
			justify-content: flex-end; 
			align-items: flex-start; 
			width: 66.87%; 
			flex-basis: 66.87%; 
			max-width: 751px; 
			.item{ 
				width: 25%; 
				flex-basis: 25%; 
				max-width: 25%; 
				&:last-child{ 
					justify-content: flex-end; 
				} 
			} 
		} 
		.delete-product{ 
			width: 19px; 
			height: 19px; 
			color: #d24a43; 
			top: 5px; 
			right: 5px; 
			line-height: 19px; 
			font-size: 19px; 
			background: #fff; 
			opacity: 1; 
			border-radius: 50%; 
			box-shadow: 0 0 3px rgba(0, 0, 0, 0.8); 
			align-self: center; 
			border: none; 
			padding: 0; 
			margin: 0; 
			margin-right: 25px; 
		} 
		.img{ 
			width: 100px; 
			height: 100px; 
			overflow: hidden; 
			display: flex; 
			justify-content: center; 
			align-items: center; 
			border: 1px solid #d5d5d5; 
			background: #fff; 
			margin-right: 20px; 
			img{ 
				max-width: 90%; 
			} 
		} 
		a, span, p { 
			font-size: 14px; 
			color: #000; 
			line-height: 18px; 
		} 
		.cart-title{ 
			text-decoration: none; 
			&:hover{ 
				text-decoration: underline; 
			} 
		} 
		strong { 
			font-size: 18px; 
			color: #000; 
			font-weight: bold; 
			line-height: 18px; 
		} 
		.price-old{ 
			text-decoration: line-through; 
		} 
		input{ 
			width: 44px; 
			border: 1px solid red; 
			font-size: 14px; 
			font-weight: bold; 
			line-height: 18px; 
			color:red; 
			text-align: center; 
			outline: none; 
		} 
		.r-btn{ 
			text-decoration: none; 
		} 
}
<div class="form"> 
<div class="table"> 
					<div class="row"> 
						<div class="left td"> 
							<button title="delete product" type="button" class="delete-product">×</button> 
							<div class="img"> 
								<a href="#"><img src="images/product2.jpg" alt=""></a> 
							</div> 
							<a href="#" class="cart-title">Title</a> 
						</div> 
						<div class="right td"> 
							<div class="item articul"> 
								<p>Артикул: 03654</p> 
							</div> 
							<div class="item code"> 
								<p>Код: 32564</p> 
							</div> 
							<div class="item"> 
								<span class="minus">-</span> 
								<input type="text"> 
								<span class="plus">+</span> 
							</div> 
							<div class="item price"> 
								<span class="price-old">2000 грн</span> 
								<strong class="price-current">1000 грн</strong> 
							</div> 
						</div> 
					</div> 
				</div> 
</div>

так будет правильно?

Answer 1

Уговорили. Примерно так. Как под себя переделать разберетесь сами.

div { 
  background-color: rgba(0, 0, 0, .1); 
} 
 
.wrapper { 
  display: flex; 
  justify-content: space-between; 
  padding: 1em; 
  margin-bottom: 1em; 
} 
 
.wrapper div:not(:last-child) { 
  margin-right: 1em; 
} 
 
.number, 
.count, 
.cost { 
  flex: 0 0 100px; 
  text-align: center; 
} 
 
.cost { 
  flex-basis: 200px; 
  text-align: right; 
  font-weight: 700; 
} 
 
.title { 
  flex: 1 0; 
} 
 
 
/* для фиксированной высоты линии */ 
 
.wrapper { 
  height: 100px; 
} 
 
.wrapper div { 
  overflow: hidden; 
} 
 
.number, 
.count, 
.cost { 
  line-height: 100px; 
}
<div class="wrapper"> 
  <div class="number">1</div> 
  <div class="title">Lorem ipsum</div> 
  <div class="count">5</div> 
  <div class="cost">1000</div> 
</div> 
 
<div class="wrapper"> 
  <div class="number">2</div> 
  <div class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel vehicula nibh, vitae consectetur felis. Praesent id consectetur arcu, eget laoreet enim. Pellentesque vel lobortis tellus, et elementum justo.  </div> 
  <div class="count">523874682</div> 
  <div class="cost">2394792873498273</div> 
</div>

READ ALSO
Как вставить русский текст в sql запрос?
MySQL

Как вставить русский текст в sql запрос?

Пытаюсь выполнить

 327
Анализ записей таблицы и очистка от невалидных данных
MySQL

Анализ записей таблицы и очистка от невалидных данных

Доброго времени суток

 285
Создание триггера по типу cron-демона
MySQL

Создание триггера по типу cron-демона

Существует ли возможность создания триггера для MariaDB или MySQL, который бы выполнялся с определённой периодичностьюНапример, удалял записи...

 231
Ошибка Access denied for user &#39;maks12345&#39;@&#39;localhost&#39; to database &#39;databasewp&#39;
MySQL

Ошибка Access denied for user 'maks12345'@'localhost' to database 'databasewp'

Хочу перенести сайт WordPress на другой доменЭкспортировал базу данных WordPress в phpMyAdmin, изменил домен и имя базы данных, хочу импортировать базу...

 212