html - Why wont a td that contains a div stretch to proper size IE7 -

my markup is:

<table style="table-layout:fixed">   <tr>     <td class="key">       <div>age:</div>     </td>     <td class="value">       <div>69</div>     </td>   </tr> </table> 

and css is:

td.key {   border-left: 1px solid #d6d6d6;   text-align: right;   font-weight: normal;   color: #7f7f7f;   background-color: peachpuff;   width: 115px; }  td.key div {   width: 100%;   background-color: lightseagreen; } 

"computed style" screenshots chrome td element:

"computed style" screenshots chrome div child element:

now when renders in chrome result:

when renders in ie7 result:

not sure i'm doing wrong great!

note: problem not occur on ie8+

if want apply attribute ie7 , below, use * key so:

td.key {   border-left: 1px solid #d6d6d6;   text-align: right;   font-weight: normal;   color: #7f7f7f;   background-color: peachpuff;   width: 115px;   *width: 105px; } 

this makes width 115 in browsers, once it's loaded in ie7 or below, sets width 105px cut off space @ end.

it's more of workaround solution, it's still valid.