Display DL like a table
Making DL list to look like a table. By CSS:
- Windows
- Firefox 14.0+
- Opera 25.0+
- Safari 7.0+
- Linux
- Firefox 14.0+
- Opera 25.0+
HTML code:
<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 code:
dl {
width: 100%;
margin: 0;
float: left;
border: 1px #000 solid;
overflow: hidden;
}
dt {
position: relative;
width: 30%;
padding: 15px;
float: left;
clear: right;
font-weight: bold;
border-bottom: 1px #000 solid;
box-sizing: border-box;
z-index: 1;
}
dt:last-of-type {
border-top: 1px #000 solid;
}
dd {
position: relative;
height: auto;
width: 70%;
padding: 15px;
margin: 0;
float: right;
clear: right;
border-top: 1px #000 solid;
border-left: 1px #000 solid;
box-sizing: border-box;
}
dd:first-of-type {
border-top: 0;
}
dd:before {
content: "";
position: absolute;
left: calc(-100% - 1px);
top: 0;
height: 100%;
width: 100%;
border-bottom: 1px #000 solid;
}
Browser support
- 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+