How can I make “display: block” work on a in IE?

Question

Is there anything I can do to make IE display table cells as actual blocks?

Given this style:

table,tbody,tr,td,div {
  display: block;
  border: 1px         


        

Answer 1

The following worked for me for IE6+:

tr {
  display: block;
  position: relative
}

td.col1 {
  display: block;
  left: 0;
  top: 0;
  height: 90px;
}

td.col2 {
  display: block;
  position: absolute;
  left: 0;
  top: 30px;
}

td.col3 {
  display: block;
  position: absolute;
  left: 0;
  top: 60px;
}

Assumptions:

• cell height 30px

Drawbacks:

• Fixed cell height
• Cumbersome specification of top property (maybe generate)
• Only works when HTML provides classes for columns

Advantage:

• Works in all browsers.

When to use:

• When you have no control over HTML, but have control over CSS. Some hosted payment solutions come to mind that display in an IFRAME and offer a custom style sheet.