html - 如何在 td 标签内制作具有动态内容全高的标签

Question

我有一个加载动态内容的表格，我希望单元格内的内容与单元格的高度相同!准确地说，我在 td 单元格中有带有一些文本的“a”元素。当单元格中的文本很长并且换行时出现问题，就像您在图像中看到的那样，表格行中的其他“a”元素不适合单元格的整个高度。

观看直播Demo

这是代码

HTML

<table class="table" cellspacing="0">
<thead>
    <tr>
        <th>Data</th>
        <th>Titolo</th>
        <th>Sede</th>
        <th>Città</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><a href="eventi.php?id=17">12/02/2015</a>
        </td>
        <td><a href="eventi.php?id=17"><span class="fixed glyphicon glyphicon-flag"></span>asd</a>
        </td>
        <td><a href="eventi.php?id=17">ada</a>
        </td>
        <td><a href="eventi.php?id=17">asdas</a>
        </td>
    </tr>
    <tr>
        <td><a href="eventi.php?id=13">04/02/2015</a>
        </td>
        <td><a href="eventi.php?id=13"><span class="fixed glyphicon glyphicon-flag"></span>ada</a>
        </td>
        <td><a href="eventi.php?id=13">prova</a>
        </td>
        <td><a href="eventi.php?id=13">asda</a>
        </td>
    </tr>
    <tr>
        <td><a href="eventi.php?id=12">07/09/2017</a>
        </td>
        <td><a href="eventi.php?id=12">Evento Lignano <br>
  sabbiadoro</a>
        </td>
        <td><a href="eventi.php?id=12">Palazzetto dello Sport</a>
        </td>
        <td><a href="eventi.php?id=12">Perugia</a>
        </td>
    </tr>
    <tr>
        <td><a href="eventi.php?id=54">09/09/2015</a>
        </td>
        <td><a href="eventi.php?id=54">aaa</a>
        </td>
        <td><a href="eventi.php?id=54">aaa</a>
        </td>
        <td><a href="eventi.php?id=54">aaa</a>
        </td>
    </tr>
    <tr>
        <td><a href="eventi.php?id=25">09/03/2015</a>
        </td>
        <td><a href="eventi.php?id=25">sfsd</a>
        </td>
        <td><a href="eventi.php?id=25">ada</a>
        </td>
        <td><a href="eventi.php?id=25">dadasd</a>
        </td>
    </tr>
</tbody>

CSS

table{
    width:400px;
}
td a{
    background:#ff0;
    display: block;
    padding:20px;
    box-sizing:border-box;
    height: 100%;
    width: 100%;
}

td{
    height:100%;
    position: relative;
}

table {
  width: 400px;
}
td a {
  background: #ff0;
  display: block;
  padding: 20px;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}
td {
  height: 100%;
  position: relative;
}

<table class="table" cellspacing="0">
  <thead>
    <tr>
      <th>Data</th>
      <th>Titolo</th>
      <th>Sede</th>
      <th>Città</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="eventi.php?id=17">12/02/2015</a>
      </td>
      <td><a href="eventi.php?id=17"><span class="fixed glyphicon glyphicon-flag"></span>asd</a>
      </td>
      <td><a href="eventi.php?id=17">ada</a>
      </td>
      <td><a href="eventi.php?id=17">asdas</a>
      </td>
    </tr>
    <tr>
      <td><a href="eventi.php?id=13">04/02/2015</a>
      </td>
      <td><a href="eventi.php?id=13"><span class="fixed glyphicon glyphicon-flag"></span>ada</a>
      </td>
      <td><a href="eventi.php?id=13">prova</a>
      </td>
      <td><a href="eventi.php?id=13">asda</a>
      </td>
    </tr>
    <tr>
      <td><a href="eventi.php?id=12">07/09/2017</a>
      </td>
      <td><a href="eventi.php?id=12">Evento Lignano <br>
  sabbiadoro</a>
      </td>
      <td><a href="eventi.php?id=12">Palazzetto dello Sport</a>
      </td>
      <td><a href="eventi.php?id=12">Perugia</a>
      </td>
    </tr>
    <tr>
      <td><a href="eventi.php?id=54">09/09/2015</a>
      </td>
      <td><a href="eventi.php?id=54">aaa</a>
      </td>
      <td><a href="eventi.php?id=54">aaa</a>
      </td>
      <td><a href="eventi.php?id=54">aaa</a>
      </td>
    </tr>
    <tr>
      <td><a href="eventi.php?id=25">09/03/2015</a>
      </td>
      <td><a href="eventi.php?id=25">sfsd</a>
      </td>
      <td><a href="eventi.php?id=25">ada</a>
      </td>
      <td><a href="eventi.php?id=25">dadasd</a>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

这是我过去用过的一个小技巧。

您基本上可以将伪元素添加到 a 元素，并将其绝对定位到 relative 最近的 td 元素。由于伪元素本质上是 a 元素的子元素，因此当您单击伪元素时，您无意中单击了 a 元素。

Updated Example

td a:after, td a:before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
}
td a:after {
  background: #ff0;
  z-index: -1;
}