I have a simple html file below that uses css style - display:table
, display:table-row
and display:table-cell
.
It seems to work fine in Chrome. In IE8, it seems to work if I have a copy of the html file on my local drive and I open it from there, but if I try to view the same html file that is hosted on sharepoint 2010, it does not display as intended; the text is not green and it displays the text on one column with 4 rows.
It should display the text in 2 rows and 2 columns, and the text on the first column should be in green.
The CSS style is embedded so I know that it's not a matter of missing style. Please help. I have been banging my head on this for a while.
<!DOCTYPE html>
<html><head><style type="text/css">
.mytable {
display: table;
}
.myrow {
display: table-row;
}
.mycell {
display: table-cell;
}
.column1 {
display: table-column;
background-color: green;
}
.column2 {
display: table-column;
background-color: grey;
}
</style></head><body><div class="mytable">
<div class="column1"></div>
<div class="column2"></div>
<div class="myrow">
<div class="mycell">contents of first cell in row 1</div>
<div class="mycell">contents of second cell in row 1</div>
</div>
<div class="myrow">
<div class="mycell">contents of first cell in row 2</div>
<div class="mycell">contents of second cell in row 2</div>
</div>
</div>
</body></html>