CODEWITHSUNDEEP
htmlhtml-table
Bojangles
Bojangles

Reputation: 101483

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 columns) so that I can get the following behavior:

Ignore the buttons along the top - I'm only on about the list behaviour.

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.

Upvotes: 1

Views: 100

Answers (2)

Répás
Répás

Reputation: 1820

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

Upvotes: 3

Damb
Damb

Reputation: 14600

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.

Upvotes: 1

Related Questions