Make a definition list display like a table?

**djeyewater** · May 27, 2012 01:40

I have a definition list that I want to display like a table with alternate coloured rows. I have got stuck on how to make the 'rows' wrap to the height of the dt or dd, whichever is greatest. What I have so far is here: http://www.iliveinabin.com/dl-style-test/

If you look at the third 'row', the contents of the dt push out below the row, and mess up the labeling of following rows.

Does anyone know how I can make a definition list look like a table?

**Stomme poes** · May 27, 2012 15:23

Does this one do anything for you? http://www.pmob.co.uk/temp/definition-list.htm

Though I also use display: inline-block, where IE instead of float:nones, gets display:inlines instead.

I do remember having trouble getting borders to line up when imitating tables, but background colours should work ok.

**djeyewater** · May 29, 2012 06:59

Thanks very much, that does help.

I'm still stuck at getting the full rows to display in alternate colours properly though, since I can only style the dts and dds, and there is no actual "row" to style. I did try using absolutely positioned :before pseudo-elements with a large size for the background. This kind of worked, but would mess up the bottom of the dl and also the fluid layout (since the pseudo elements were large and had to overflow their parents). Example: http://www.iliveinabin.com/dl-style-test/v3.html

This is what I have at the moment: http://www.iliveinabin.com/dl-style-test/v2.html

The only way I can think of to get each full "row" as an alternate colour is using javascript to set the height of the dt or dd (whichever is smaller) on each row to the height of the dt or dd (whichever is larger) on that row. I don't know how to do this using CSS?

**Paul O'B** · May 29, 2012 07:30

I assume you are stuck with the DL so how about something like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Definition List</title>
<style type="text/css">
dl, dt, dd { margin:0 }
dl {
	width:444px;
	background:red;
	padding:5px;
	overflow:hidden;
	position:relative;
	z-index:1;
}
dt {
	display:inline-block;
	vertical-align:top;
	width:100px;
	padding:5px 20px 5px 5px;
	position:relative;
}
dd {
	display:inline-block;
	vertical-align:top;
	width:300px;
	padding:5px;
	position:relative;
}

dt:nth-child(4n+1):after, dd:nth-child(4n+2):after {
	content:" ";
	position:absolute;
	display:block;/* safari bug */
	left:-999em;
	top:0;
	bottom:0;
	right:-999em;
	background:blue;
	z-index:-1;
}
</style>
</head>
<body>
<h1>Definition List</h1>
<dl>
		<dt>Data Term 1</dt>
		<dd>The definition should go here : The definition should go here : The definition should go here : The definition should go here : The definition should go here : The definition should go here : The definition should go here : The definition should go here : </dd>
		
		<dt>Data Term 2</dt>
		<dd>The definition should go here : The definition should go here : The definition should go here : The definition should go here : The definition should go here : The definition should go here : The definition should go here : The definition should go here : </dd>
		
		<dt>Data Term 3 is longer than the definition for some strange reason : Data Term 3 is longer than the definition for some strange reason : Data Term 3 is longer than the definition for some strange reason : Data Term 3 is longer than the definition for some strange reason : </dt>
		<dd>The definition should go here : The definition should go here : The definition should go here : The definition should go here : </dd>
		
		<dt>Data Term 4 is longer than the definition for some strange reason :  Data Term 3 is longer than the definition for some strange reason : Data Term 3 is longer than the definition for some strange reason : </dt>
		<dd>The definition should go here : The definition should go here : The definition should go here : </dd>
		
		<dt>Data Term 5</dt>
		<dd>The definition should go here : The definition should go here : The definition should go here : The definition should go here : The definition should go here : The definition should go here : The definition should go here : The definition should go here : </dd>
		
		<dt>Data Term 6 is longer than the definition for some strange reason : Data Term  is longer than the definition for some strange reason : Data Term  is longer than the definition for some strange reason : Data Term  is longer than the definition for some strange reason : </dt>
		<dd>The definition should go here : The definition should go here : The definition should go here : The definition should go here : </dd>
		
		<dt>Data Term 7 is longer than the definition for some strange reason :  Data Term  is longer than the definition for some strange reason : Data Term  is longer than the definition for some strange reason : </dt>
		<dd>The definition should go here : The definition should go here : The definition should go here : </dd>
</dl>
</body>
</html>

I haven't added any hacks for ie7 and under although you could mimic the inline-block but not the striped row (without a script).

**Stomme poes** · May 29, 2012 13:29

Originally Posted by Paul

although you could mimic the inline-block but not the striped row (without a script).

Or if IE7 and below is being left out of this party anyway

Code:

dl {
  background-color: #fff;
}
dt:nth-child(2n), dd:nth-child(2n) {
  background-color: fugly;
}

assuming only one dd per dt and no nesting.

**djeyewater** · May 30, 2012 04:29

Thanks for the help, I now have the following, which is "good enough": http://www.iliveinabin.com/dl-style-test/v4.html

In IE6 and 7 the dds sometimes display to the right of the dts (as I want), and sometimes under the dts, depending on viewport size. I am not sure why this happens, and whether there is anything that can be done to make them display always to the right?

I couldn't get it displaying "correctly" in old gecko either. I tried -moz-inline-stack, but that jumbled all the paragraphs on top of each other.

The only other thing is, it would be nice each "cell" had a border, but I can't see any way that could be done.

What I'm doing is converting a table on an existing page to a dl instead. The table only contains name value pairs, so a dl seems to make more sense.

**Paul O'B** · May 30, 2012 11:22

Hi,
Ie will round the percentages up too much and the element becomes too big to fit and will drop down a line. Just shorten the wodth or offset it with a negative margin.

Code:

dd {
	width:77%;
	padding-right: 1%;
}

I couldn't get it displaying "correctly" in old gecko either. I tried -moz-inline-stack, but that jumbled all the paragraphs on top of each other

Older gecko works better with -moz-inline-box as I've never seen stack work properly. However older gecko does often like the internal content to be display:block inside of the -moz-inline-box element so it may be a step too far without adding extra mark up. I don't have an old version of gecko around at the moment to test.

The only other thing is, it would be nice each "cell" had a border, but I can't see any way that could be done.

I couldn't think of a way to do that otherwise I would have added it to the demo. There;s no way of knowing which is the tallest so you would end up with two lines in my example - which didn't matter for the background colour as its the same colour.

Actually I just though of a way of creating a border between rows

Make a top border only as the tops are always aligned.

e.g.

Code:

dd:before{
	content:" ";
	position:absolute;
	display:block;/* safari bug */
	left:-999em;
	top:-1px;
	right:-999em;
	z-index:-1;
	border-top:1px solid #fff	
}

**Paul O'B** · May 30, 2012 11:33

... and for a vertical line you could perhaps do the following:

Code:

dl:before{
	content:" ";
	position:absolute;
	display:block;/* safari bug */
	left:19%;
	top:0;
	bottom:0;
	z-index:1;
	border-right:1px solid #fff	
}

**djeyewater** · May 31, 2012 07:34

Thanks very much for the idea, it works great!

However, I have modified it slightly to provide for cell borders in IE6 and 7 as well, by applying the borders to the dts and dds instead of the pseudo elements. However, in Opera, and Webkit, the top border of the dd does not extend all the way to the edge of the dl. It looks like the dd does not extend all the way to the edge of the dl. It works okay in Firefox and IE.

I tried commenting out the bits for the vertical borders (borders and margins on dt and dd), but that didn't make any difference. I'm not sure why it's okay in FF and IE9 but not the other browsers?

The example is here: http://www.iliveinabin.com/dl-style-test/v6.html

The obvious fix is by adding in the top border on the pseudo element as well, and this works fine. But ideally I'd like to understand why Webkit and Opera are displaying differently to IE and FF without this fix.

**Paul O'B** · May 31, 2012 14:26

Originally Posted by djeyewater

But ideally I'd like to understand why Webkit and Opera are displaying differently to IE and FF without this fix.

It looks like a rounding error with percentages because as you close the window the gap gets bigger and smaller at odd pixels. I changed your code to this:

Code:

dt{
width:19%;
border-right:2px solid #FFF;
margin: 0;
}
dd {
width:78%;
padding-right: 1%;
border-left:2px solid #FFF;
margin: 0 0 0 -2px;
}

If you open and close the window now the gap occasionally disappears and sometimes the content drops so its certainly a rounding error with percentages. I believe Firefox keeps a running total of percentages these days and adds all the various elements together so that it is more accurate. With percentages you will always run the risk of being a pixel out.

**djeyewater** · Jun 2, 2012 13:54

Thanks for that explanation, I tried what you suggested and could see the gap changing as you said. I'll apply the border-top to the pseudo element as well to fix the problem, then I have everything looking like I wanted.

I really appreciate all your help with this, your CSS Guru badge is well deserved!

Cheers

Dave

User Tag List

Thread: Make a definition list display like a table?

Thread Tools

Display

Make a definition list display like a table?

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions