Простой способ использовать список с колонками

Question

Я использую таблицу для отображения списка элементов в почтовом ящике веб-почты. Проблема здесь в том, что :hover на tr не работает в IE (и глупо это делать в любом случае, поэтому вопрос). Список имеет несколько столбцов, очень похоже на формат GMail. Что я хочу сделать, так это уметь устанавливать фон каждой строки при наведении, между прочим. Может кто-нибудь дать мне хорошее решение для таблицы (скажем, список с несколькими столбцами), чтобы я мог получить следующее поведение:

В идеале я не хочу использовать что-то вроде JQGrid; Я хотел бы сделать это, используя чистый HTML и как можно более чистую разметку. CSS, конечно, хорошо.

Answer 1

Это работает, не так ли?

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 / я думаю, что это работает везде

<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>

Редактировать: я забыл. до .td. Проверьте это по адресу: jsFiddle

Answer 2

Я бы предложил , используя классическую HTML-таблицу (потому что это 100% чистый случай таблицы).А затем используйте jQuery (или pure js), чтобы легко добавить к нему эту функцию при наведении курсора.