CODEWITHSUNDEEP
htmlcss
Peter Albert
Peter Albert

Reputation: 17485

DL like a table

I have the following DL in a container that is 300px wide.

<style type="text/css">
dl {width: 300px}
dt {
  float:left;
  clear: left;
  width: 70px;
}
</style>
<dl>
  <dt>Row1</dt>
  <dd>Value1</dd>
  <dt>Row2</dt>
  <dd>Value2</dd>
  <dt>Row3 with longer title requiring line breaks</dt>
  <dd>Value 3</dd>
  <dt>Row4</dt>
  <dd>Value4</dd>
  <dt>Row5</dt>
  <dd>Value5.1</dd>
  <dd>Value5.2</dd>
  <dt>Row6</dt>
  <dd>Value6.1</dd>
  <dd>Value6.1</dd>
  <dd>Value6.1</dd>
</dl>

How can I align the items to look like a table, i.e.:

I found multiple related questions here, here and here, but with neither I managed to top-align the different situation (DT being higher than DD, multiple DDs being higher than DT).

Upvotes: 3

Views: 3643

Answers (2)

ralliart2004
ralliart2004

Reputation: 75

I would use Bootstrap to handle the DL for you.

Bootstrap Description List

They have two options and you could also customize their setup for your liking. Just a suggestion.

.dl-horizontal:before,
.dl-horizontal:after {
    display: table;
    content: "";
    line-height: 0;
}
.dl-horizontal dt {
  float: left;
  width: 160px;
  clear: left;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dl-horizontal dd {
  margin-left: 180px;
}

http://jsfiddle.net/rzWnG/1/

This what bootstrap uses to make a horizontal DL. I motified it a bit to look better for what you are wanting. I used Explosion Pills html from his JSfiddle. For that, I will give him an upvote.

Try this. It would help a bit more to get an exact of what you are wanting.

Upvotes: 2

Explosion Pills
Explosion Pills

Reputation: 191769

I think this solution will be in line with what you want with some minor tweaking. Basically, you need to also float all of the dds, but you need to clear them so that they stack vertically. However, you cannot clear the first one since you need the dt to float to the left. The + (next sibling) selector is handy for this since you can override the clear rule on the first dd that follows a dt. You may also need to update the margins of the other dds.

dl {width: 300px}
dt {
  float:left;
  clear: left;
  width: 70px;
}
dd {
    clear: left;
    float: left;
    margin-left: 70px;
}
dt + dd {
    float: left;
    clear: none;
    margin-left: 0;
}

http://jsfiddle.net/8VKng/2/

Upvotes: 4

Related Questions