Форум

katamason · #1 (**permalink**) 15.01.2012, 14:30

Здравствуйте. Подскажите пожалуйста, как сверстать такую таблицу ?

Title ------------ 5000
Title long ------- 5000

Под таблицей градиентный фон, т.е фоновые накрывания не пойдут ..
То есть вся проблема чтобы полоса принимала нужную длину

Octane · #2 (**permalink**) 15.01.2012, 14:33

Сообщение от katamason

Под таблицей градиентный фон, т.е фоновые накрывания не пойдут ..

прозрачное изображение проблема чтоли сделать?

Octane · #3 (**permalink**) 15.01.2012, 16:44

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>…</title>
<style>
.price {
	width: 500px;
	background: url(http://habrastorage.org/storage2/4c0/00e/13e/4c000e13eb0dd2022558865ecd406b0c.png) repeat-y;
}
.price, .price .item {
	display: block;
	margin: 0;
	padding: 0;
}
.price .item {
	overflow: hidden; /*clearfix*/
}
.price .item .name {
	display: block;
	float: left;
	max-width: 400px;
}
.price .item .cost {
	display: block;
	overflow: hidden; /*новый контекст форматирования*/
}
.price .item .cost .inner-1 {
	display: block;
	margin-right: 80px;
	background: url(http://habrastorage.org/storage2/e7d/23a/52b/e7d23a52b7fa2a3534d634a8cb695f16.png) repeat-x center;
	zoom: 1;
}
.price .item .cost .inner-2 {
	display: block;
	margin-left: 100%;
}
</style>
</head>
<body>
	<ul class="price">
		<li class="item">
			<span class="name">Товар</span>
			<span class="cost">
				<span class="inner-1">
					<span class="inner-2">100500</span>
				</span>
			</span>
		</li>
		<li class="item">
			<span class="name">Длинное название товара</span>
			<span class="cost">
				<span class="inner-1">
					<span class="inner-2">9000</span>
				</span>
			</span>
		</li>
	</ul>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript