Is it just me, or do my CSS tables not work on IE8?
<div class="main-table">
<div class="row">
<a class="secondary-table" href="#">
<div class="secondary-row">
<div class="secondary-cell">
$1000000000
</div>
<div class="secondary-cell">
descrip<br /><span class="info">info</span>
</div>
<div class="secondary-cell" align="right">
<button>View</button>
</div>
</div>
<div class="secondary-row">
<div class="secondary-cell">
info
</div>
<div class="secondary-cell">
</div>
<div class="secondary-cell" align="right">
<button>View</button>
</div>
</div>
</a>
</div>
Here's the current CSS code:
body {
background-color: #f8f8f8;
}
.main-table {
display: table;
border: 1px solid #dcdcdc;
height: 700px;
background: white;
table-layout: fixed;
width: 100%;
}
.secondary-cell:first-child {
width: 80px;
max-width: 80px;
word-wrap: break-word;
}
.secondary-table {
display: table;
table-layout: auto;
border-bottom: 1px solid #eee;
width: 100%;
}
a.secondary-table:hover {
background-color: #f9f9f9;
}
.secondary-row {
display: table-row;
}
@media screen and (min-width: 768px) {
.secondary-row:last-child {
display: none;
}
}
@media screen and (max-width: 768px) {
.secondary-row:first-child .secondary-cell:last-child {
display: none;
}
.info {
display: none;
}
}
.secondary-cell {
display: table-cell;
padding: 10px;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}