Table Cell 1:1 ratio for height at %-width - css

Question

I've got a Table with % width and tds with % width. Also table-layout: fixed.
I want the tds height to be 1:1 ratio to %-width.
I can't use td:before {content: ""; display: block; margin-top: 100%;} because that would throw off the positioning of td content and I can't edit the html. So i used it in tr, which leads to the actual problem of the :before being displayed as table cell.
Any ideas on how to fix that or other ways to get the 1:1 ratio?
Here is a fiddle: jsfiddle
And here the internal code snippet, didn't find where to enable SCSS.
table {
width: 100%;
line-height: 31px;
table-layout: fixed;
thead tr: last-child th {
background: blue;
color: white;
&: first-child {
border-top-left-radius: 4px;
}
&:last-child {
border-top-right-radius: 4px;
}
}
tbody {
text-align: center;
td {
width: 14.2857142857%;
position: relative;
box-shadow: inset 1px -1px 0px 0px gray;
&: last-child {
box-shadow: inset 1px -1px 0px 0px gray, inset -1px 0px 0px 0px gray;
}
& .header {
position: absolute;
top: 0.2vw;
left: 0.2vw;
line-height: 11px;
padding: 8px;
font-size: 12px;
}
& .event {
background: blue;
border-radius: 4px;
margin: 35px 4px 4px 4px;
& ~ .event {
margin: 4px;
}
& a:link,
& a:visited,
& a:hover,
& a:active {
color: white;
}
& a:hover {
text-decoration: underline;
}
}
}
.today .header {
color: white;
background: blue;
}
tr {
&: nth-child(odd) .days: nth-child(odd) {
background: gray;
}
&:nth-child(even) .days:nth-child(even) {
background: gray;
}
&:before {
content: "";
display: block;
margin-top: 100%;
}
}
}
}
<table class="calendar">
<thead>
<tr>
<th colspan="2" class="head previous"> </th>
<th colspan="3" class="head current">October 2014</th>
<th colspan="2" class="head next"> </th>
</tr>
<tr>
<th class="label col_first">Mon<span>day</span>
</th>
<th class="label">Tue<span>sday</span>
</th>
<th class="label">Wed<span>nesday</span>
</th>
<th class="label">Thu<span>rsday</span>
</th>
<th class="label">Fri<span>day</span>
</th>
<th class="label weekend">Sat<span>urday</span>
</th>
<th class="label col_last weekend">Sun<span>day</span>
</th>
</tr>
</thead>
<tbody>
<tr class="week_0 first">
<td class="days empty col_first">
<div class="header"> </div>
</td>
<td class="days empty">
<div class="header"> </div>
</td>
<td class="days">
<div class="header">1</div>
</td>
<td class="days">
<div class="header">2</div>
</td>
<td class="days">
<div class="header">3</div>
</td>
<td class="days weekend">
<div class="header">4</div>
</td>
<td class="days weekend col_last">
<div class="header">5</div>
</td>
</tr>
<tr class="week_1">
<td class="days col_first">
<div class="header">6</div>
</td>
<td class="days">
<div class="header">7</div>
</td>
<td class="days">
<div class="header">8</div>
</td>
<td class="days">
<div class="header">9</div>
</td>
<td class="days today">
<div class="header">10</div>
</td>
<td class="days weekend">
<div class="header">11</div>
</td>
<td class="days active weekend col_last">
<div class="header">12</div>
<div class="event cal_1 upcoming"> Rauchen
</div>
<div class="event cal_1 upcoming"> Toilette
</div>
<div class="event cal_1 upcoming"> Spülen
</div>
<div class="event cal_1 upcoming"> Essen
</div>
<div class="event cal_1 upcoming"> Schlafen
</div>
</td>
</tr>
<tr class="week_2">
<td class="days col_first">
<div class="header">13</div>
</td>
<td class="days">
<div class="header">14</div>
</td>
<td class="days">
<div class="header">15</div>
</td>
<td class="days">
<div class="header">16</div>
</td>
<td class="days">
<div class="header">17</div>
</td>
<td class="days weekend">
<div class="header">18</div>
</td>
<td class="days weekend col_last">
<div class="header">19</div>
</td>
</tr>
<tr class="week_3">
<td class="days col_first">
<div class="header">20</div>
</td>
<td class="days">
<div class="header">21</div>
</td>
<td class="days">
<div class="header">22</div>
</td>
<td class="days">
<div class="header">23</div>
</td>
<td class="days">
<div class="header">24</div>
</td>
<td class="days weekend">
<div class="header">25</div>
</td>
<td class="days weekend col_last">
<div class="header">26</div>
</td>
</tr>
<tr class="week_4 last">
<td class="days col_first">
<div class="header">27</div>
</td>
<td class="days">
<div class="header">28</div>
</td>
<td class="days">
<div class="header">29</div>
</td>
<td class="days">
<div class="header">30</div>
</td>
<td class="days">
<div class="header">31</div>
</td>
<td class="days empty weekend">
<div class="header"> </div>
</td>
<td class="days empty weekend col_last">
<div class="header"> </div>
</td>
</tr>
</tbody>
</table>

Answer 1

Ok I did it like this now:jsfiddle
Put the before in the td and just gave the first .event -80% margin top.
& .event {
margin: -80% 4px 4px 4px;
td:before {
content: "";
display: block;
margin-top: 100%;
}