Question

我遇到这种情况：jsFiddle

问题是当我在链接标记中有更多内容时。我想为所有链接填充整个表格单元格（高度）。

.grid {
    border-collapse: collapse;
}
.grid td{
    border: solid 1px #ccc;
}
.grid td a{
   background-color: yellow;
   display:block;
}
        <table class="grid">
    <tr>
        <td>
             <a href="#">
                 content content content contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent content
             </a>
        </td>
        <td><a href="#">content</a></td>
        <td><a href="#">content</a></td>
        <td><a href="#">content</a></td>
        <td><a href="#">content</a></td>
    </tr>
    </table>

Answer 1

设置 white-space: nowrap css属性，您的内容不会拆分为其他行。

代码：

        <td style="white-space: nowrap">
             <a href="#">
                 content content content contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent content
             </a>
        </td>

更新小提琴：http://jsfiddle.net/wxabmLLf/1/

有关 white-space 的MDN文档：

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Answer 2

这不能通过css单独实现。你需要一些javascript才能做到这一点。

这是我的解决方案：

加载页面后，您可以检查td的最大高度，并将该高度分配给该特定表格中的所有链接。

链接填充表中的完整td高度

2 个答案:

代码：