ПитерСайт » Блог » Список DL в виде таблицы

Список DL в виде таблицы

Отображение списка DL в виде таблицы с помощью CSS:

Windows: Firefox 14.0+; Opera 25.0+; Safari 7.0+
Linux: Firefox 14.0+; Opera 25.0+

HTML код:


<dl>
	<dt>Windows</dt>
	<dd>Firefox 14.0+</dd>
	<dd>Opera 25.0+</dd>
	<dd>Safari 7.0+</dd>
	<dt>Linux</dt>
	<dd>Firefox 14.0+</dd>
	<dd>Opera 25.0+</dd>
</dl>

CSS код:


dl {
	width: 100%;
	margin: 0;
	float: left;
	border: 0.1rem #000 solid;
	overflow: hidden;
}
dt {
	position: relative;
	width: 30%;
	padding: 1.5rem;
	float: left;
	clear: right;
	font-weight: bold;
	border-bottom: 0.1rem #000 solid;
	box-sizing: border-box;
	z-index: 1;
}
dt:last-of-type {
	border-top: 0.1rem #000 solid;
}
dd {
	position: relative;
	height: auto;
	width: 70%;
	padding: 1.5rem;
	margin: 0;
	float: right;
	clear: right;
	border-top: 0.1rem #000 solid;
	border-left: 0.1rem #000 solid;
	box-sizing: border-box;
}
dd:first-of-type {
	border-top: 0;
}
dd:before {
	content: "";
	position: absolute;
	left: calc(-100% - 0.1rem);
	top: 0;
	height: 100%;
	width: 100%;
	border-bottom: 0.1rem #000 solid;
}

Поддержка в браузерах

Windows Internet Explorer 9.0+, Firefox 29.0+, Google Chrome 9.0+, Opera 15.0+, Safari 5.1+
Linux Firefox 29.0+, Google Chrome 9.0+, Opera 15.0+

Теги: CSS, DL

Опубликовано: 1 Июля, 2024
Последнее редактирование: 1 Июля, 2024