我有一个％宽度的表和％宽度的tds。表格布局：固定。
我希望tds高度与％-width的比例为1：1。
我无法使用td:before {content: ""; display: block; margin-top: 100%;}，因为这会摒弃td内容的定位而我无法编辑html。所以我在tr中使用它，这导致了：在显示为表格单元格之前的实际问题。
关于如何解决这个或其他方式以获得1：1比例的任何想法？
这是一个小提琴：jsfiddle
这里的内部代码片段没有找到启用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"> <a href="events-reader/rauchen.html" title="Rauchen (Sunday, 2014-10-12)">Rauchen</a>
</div>
<div class="event cal_1 upcoming"> <a href="events-reader/toilette.html" title="Toilette (Sunday, 2014-10-12)">Toilette</a>
</div>
<div class="event cal_1 upcoming"> <a href="events-reader/spuelen.html" title="Spülen (Sunday, 2014-10-12)">Spülen</a>
</div>
<div class="event cal_1 upcoming"> <a href="events-reader/essen.html" title="Essen (Sunday, 2014-10-12)">Essen</a>
</div>
<div class="event cal_1 upcoming"> <a href="events-reader/schlafen.html" title="Schlafen (Sunday, 2014-10-12)">Schlafen</a>
</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>
答案 0 :(得分：0)
好的我现在就这样做了：jsfiddle
将前一个放入td，然后给出第一个.event -80％的上边距。
& .event {
margin: -80% 4px 4px 4px;
td:before {
content: "";
display: block;
margin-top: 100%;
}