Question

我有一个表格，我加载动态内容，我希望单元格内的内容与单元格的高度相同！我确实有＆＃34; a＆＃34;在td单元格内部有一些文本的元素。当单元格中的文本很长并且换行时，我遇到了问题，就像你可以在图像中看到另一个＆＃34; a＆＃34;表格行中的元素不适合单元格的整个高度。

查看实时Demo

这是代码

HTML

m_Result

CSS

<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>

＆＃13;

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

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

＆＃13;

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

＆＃13;

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;
}

Answer 2

您必须定义道明的高度，否则浏览器不知道要考虑的100％：

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

https://jsfiddle.net/wg6paumw/4/

如何在td标记内创建具有动态内容全高的标记

2 个答案: