Simple way to use a list with columns

I've been using a table to display a list of items in a webmail inbox. The issue here is that :hover on a tr doesn't work in IE (and it's stupid to do it anyway, hence the question). The list has multiple columns, much like GMail's format. What I want to do is be able to set the background of each row on hover, among other things. Can someone give me a good solution to a table (say, a list with multiple col开发者_运维问答umns) so that I can get the following behavior:

Ideally, I don't want to use something like JQGrid; I'd like to do this using pure HTML and as clean markup as possible. CSS is, obviously, fine.

It works isn't it?

jQuery

$("tr").mouseenter(function(){
  $(this).children("td").css("background-color", "green"); // adds green bg
}).mouseleave(function(){
  $(this).children("td").css("background-color", ""); // removes it.
});

HTML+CSS only / i think it works everywhere

<style type="text/css">
  .table {display: table}
  .tr {display: table-row}
  .tr:hover .td {background-color: green}
  .td {display: table-cell}
</style>

<div class="table">
  <div class="tr">
    <div class="td">aaa</div>
    <div class="td">bbb</div>
    <div class="td">ccc</div>
  </div>
</div>

Edit: I forgot a . before the .td. Check it at: jsFiddle

I would suggest using classic html table (because this is a 100% pure table case). And then use jQuery (or pure js) to easily add that hover functionality to it.