Keep the same height between the background of the term description pair in the table definition list

Question

I want to format the definition list in HTML, as if it were a table with thin a column and tdin another, with a background that alternates in a row (although the background for dtboth is ddalso suitable for the problem), so I have this CSS:

dl {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.6em;
    overflow: hidden;
    width: 200px;;
    }
dl dt {
    font-weight: bold;
    float: left;
    clear: left;
    padding-right: 1%;
    width: 48%;
    }

dl dt:nth-of-type(odd),
dl dd:nth-of-type(odd) {
        background-color: #EEE;
    }
dl dt:nth-of-type(even),
dl dd:nth-of-type(even) {
        background-color: #DDD;    
    }
dl dd {
    float: left;
    width: 50%;
    padding-left: 1%;
    margin-left: 0;
    }

HTML example:

<dl>
  <dt>Key 1</dt>
    <dd>Value 1</dd>
  <dt>Very very very long key 2</dt>
    <dd>Value 2</dd>
  <dt>Key 3</dt>
    <dd>Value 3 with<br /> line breaks</dd>
  <dt>Key 4</dt>
    <dd>Value 4</dd>
</dl>

The problem is that due to a possible difference in height, "holes" without a background appear in the list:

Is there any way to fix this?

Answer 1

This works in all browsers.

( * Alohci - , . )

<style type="text/css">
dl {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.6em;
    overflow: hidden;
    width: 200px;
}
dl dt {
    font-weight: bold;
    float: left;
    clear: left;
    width: 100px;
    margin-right:-100px;
    padding-right:100px;
}
dl dt, dl dd {
    background-color: #DDD;
}
dl dt.odd, dl dd.odd {
    background-color: #EEE;
}

dl dd {
    float: left;
    width: 100px;
    margin-left: 0;
    padding-left:100px;
    margin-left :-100px
}

span {
    position:relative;
    z-index:10;
}

</style>

<dl>
  <dt class="odd"><span>Key 1</span></dt>
  <dd class="odd"><span>Value 1</span></dd>
  <dt><span>Very very very long key 2</span>
  </dt>
  <dd><span>Value 2</span></dd>
  <dt class="odd"><span>Key 3</span></dt>
  <dd class="odd"><span>Value 3 with<br /> line breaks</span></dd>
  <dt><span>Key 4</span></dt>
  <dd><span>Value 4</span></dd>
</dl>

Answer 2

, CSS. CSS. , , - , , , .

, DL, /. .

Answer 3

, , dt dd span, dt, dd . , IE IE9 :nth-of-type, IE. . - :

dl {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.6em;
    overflow: hidden;
    width: 300px;
    margin-right:-100px;
    }
dl dt {
    font-weight: bold;
    float: left;
    clear: left;
    padding-right: 34%;
    width: 32%;
    }

dl dt:nth-of-type(odd),
dl dd:nth-of-type(odd)  {
        background-color: #EEE;
    }
dl dt:nth-of-type(even),
dl dd:nth-of-type(even)  {
        background-color: #DDD;    
    }

dl dd {
    float: left;
    width: 66%;
    padding-left: 0%;
    margin-left: -66%;
    }

dl dt span {
    position:relative;
    z-index:1;
    display:block;
    }

dl dd span {
    margin-left: 50%;
    display:block;
    }

---

<dl>
  <dt><span>Key 1</span></dt>
    <dd><span>Value 1</span></dd>
  <dt><span>Very very very long key 2</span></dt>
    <dd><span>Value 2</span></dd>
  <dt><span>Key 3</span></dt>
    <dd><span>Value 3 with<br /> line breaks</span></dd>
  <dt><span>Key 4</span></dt>
    <dd><span>Value 4</span></dd>
</dl>

Answer 4

• display: table-cell; , display: table-row; (, , IE ... )

• display: inline-block; , - , .

• , , min-height

• , dl dd ( ), ( , , 2 )

• JS - : JS, JS, zebrify .