css - 表格单元格 1 :1 ratio for height at %-width

Question

我有一个宽度为 % 的表格和宽度为 % 的 tds。还有 table-layout: fixed。

我希望 tds 高度与 %-宽度的比例为 1:1。

我不能使用 td:before {content: "";显示: block ； margin-top: 100%;} 因为那样会影响 td 内容的定位，我无法编辑 html。所以我在 tr 中使用了它，这导致了 :before 被显示为表格单元格的实际问题。

关于如何解决这个问题或通过其他方式获得 1:1 比率的任何想法？

这是一个 fiddle :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">&nbsp;</th>
      <th colspan="3" class="head current">October 2014</th>
      <th colspan="2" class="head next">&nbsp;</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">&nbsp;</div>
      </td>
      <td class="days empty">
        <div class="header">&nbsp;</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">&nbsp;</div>
      </td>
      <td class="days empty weekend col_last">
        <div class="header">&nbsp;</div>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

好的，我现在这样做了:jsfiddle

将 before 放在 td 中，只给第一个 .event -80% margin top。

& .event {
                margin: -80% 4px 4px 4px;
td:before {
                content: "";
                display: block;
                margin-top: 100%;
            }