Collapsing of borders.
When scaled in Chrome, borders of top table, top row, still have lines in between.
HTML
The way is looks scaled.. The top border won't collapse..
<div class="scaled">
<table class="debttable">
<tr>
<td>Hello</td>
<td></td>
<td>Hello</td>
<td>Hello</td>
</tr>
<tr>
<td>World</td>
<td></td>
<td>World</td>
<td>World</td>
</tr>
<tr>
<td>World</td>
<td>g</td>
<td>World</td>
<td>World</td>
</tr>
<tr>
<td>World</td>
<td>g</td>
<td>World</td>
<td>World</td>
</tr>
<tr>
<td>World</td>
<td></td>
<td>World</td>
<td>World</td>
</tr>
<tr>
<td>World</td>
<td>g</td>
<td>World</td>
<td>World</td>
</tr>
</table>
</div>
<div class="not-scaled">The way it should look, (this is not scaled)
<table class="debttable">
<tr>
<td>Hello</td>
<td></td>
<td>Hello</td>
<td>Hello</td>
</tr>
<tr>
<td>World</td>
<td></td>
<td>World</td>
<td>World</td>
</tr>
<tr>
<td>World</td>
<td>g</td>
<td>World</td>
<td>World</td>
</tr>
<tr>
<td>World</td>
<td>g</td>
<td>World</td>
<td>World</td>
</tr>
<tr>
<td>World</td>
<td></td>
<td>World</td>
<td>World</td>
</tr>
<tr>
<td>World</td>
<td>g</td>
<td>World</td>
<td>World</td>
</tr>
</table>
</div>
CSS
.debttable {
margin: 0px;
background: #fff;
border-collapse: collapse;
margin:0px;
padding:0px;
font-size: 10px;
font-weight:normal;
color:#807c7c;
}
/* default for all cells in table*/
.debttable td {
vertical-align:middle;
border:1px solid #bfd8ee;
text-align:right;
padding:0px;
padding-right: 3px;
/* width: 50px;*/
}
/* debttable first column*/
.debttable td:first-child {
/* width: 188px;*/
text-align:left;
padding: 5px;
}
/* debttable second column*/
.debttable td:nth-child(2) {
/* width: 25px;*/
height: 18px;
text-align:center;
}
/* debttable first row*/
.debttable tr:first-child {
background: #002664;
color: #fff;
border: 0px;
height: 32px;
font-size: 11px;
text-align:center;
}
/* debttable first row cells, years*/
.debttable tr:first-child td {
text-align:center;
border:0px;
border-collapse: collapse;
}
/* debttable top left*/
.debttable tr:first-child td:first-child {
font-size: 16px;
padding-left: 5px;
text-align:left;
}
/* debttable top G row*/
.debttable tr:first-child td:nth-child(2) {
font-size: 16px;
padding-left: 5px;
color: #000;
text-align:left;
}
/* debttable top G row*/
.debttable tr:nth-child(2) {
background: #fef1db;
height: 25px;
font-size: 12px;
}
/* debttable top G row*/
.debttable td:nth-child(2) {
padding-left: 5px;
padding-right: 5px;
}
.scaled {
transform-origin: 0px 0px;
-webkit-transform-origin: 0px 0px;
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
.not-scaled {
margin-top:15px;
}