When I type the following code under JsFiddle, it works and display a 4x4 table. HTML <div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">1</div>
<div class="divTableCell">2</div>
<div class="divTableCell">3</div>
<div class="divTableCell">4</div>
</div>
<div class="divTableRow">
<div class="divTableCell">5</div>
<div class="divTableCell">6</div>
<div class="divTableCell">7</div>
<div class="divTableCell">8</div>
</div>
<div class="divTableRow">
<div class="divTableCell">9</div>
<div class="divTableCell">10</div>
<div class="divTableCell">11</div>
<div class="divTableCell">12</div>
</div>
<div class="divTableRow">
<div class="divTableCell">13</div>
<div class="divTableCell">14</div>
<div class="divTableCell">15</div>
<div class="divTableCell">16</div>
</div>
</div>
</div> CSS: /* DivTable.com */
.divTable{
display: table;
width: 100%;
}
.divTableRow {
display: table-row;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
}
.divTableCell, .divTableHead {
border: 1px solid #999999;
display: table-cell;
padding: 3px 10px;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
} However when I try under roll20 preview tab, all the numbers are aligned below each other. <a href="https://jsfiddle.net/5371nfts/" rel="nofollow">https://jsfiddle.net/5371nfts/</a> What am I doing wrong ?
