How to format tables with css?

[ratan]

Hi,

Having some trouble formatting a table with css.
Its going to have some auto generated content and the way I want it to appear vs the way it is right now is not working out.

If I design it with table code (the non css way) I end up with a ton of code for the script to process.

The table may/may not be a zebra design. Strongly towards the not at this point. I'm trying to make it fluid, the article area will have a link in it with a hover property but i'm also trying to make the whole row hover as well and this is taking a toll on the code when i include the padding and bottom border its a complete mess. Please help.

Is it possible to achieve the design in the pic with minimal css code?


Thank you!

[markbrown4]

Hi,

I'm without my firefox tools at the moment but this should work for you,

table {
  border-collapse: collapse;
  width: 100%;
  border-top: 1px solid #555;
  color: #555;
}
th, td {
  border-bottom: 1px solid #555;
  background: #EEE;
  padding: 20px;
}
td {
  background: #FFF;
}