如何使用填充/链接填充100％的TD中心文本

Question

已经做了一些试验来创建一个带有集成链接的TD，填充TD 100％所以当我将鼠标悬停在整个TD上时我可以看到光标的变化，当通过Tab键选择元素时整个TD被选中等等问题是我在不同的浏览器中得到不同的行为，我无法找到适用于不同浏览器的解决方案。主要是以文本为中心的问题。

如果我只有TD并制作一个Javascript onclick事件来处理点击等文本在所有浏览器中都很好，但我喜欢包含一个链接/锚点，这样用户就可以选择元素来激活行为（同样适合残疾人士）。

在TD中制作一个没有填充高度并且正常居中的锚点也很容易，但是我有一个问题，即当悬停时整个TD都不会改变光标，只能选择TD的中心。

你可以在这里看到我的一些试验（将在稍后删除）：http://pcrypt.dk/dev/contact.php - 在例如FF和Chrome中测试它们。

这是HTML代码：

<table width=150 border=0>
<tr><td class=loginbutton id='sendtext'><a href=#><div style='height:100%; width:100%'>".$lang['contact']['PCCONTACTSENDBUTTON']."</div></a></td></tr>
<tr><td class=loginbutton id='sendtext'><a href=#><div style='display: table-cell; height:100%; width:100%'>".$lang['contact']['PCCONTACTSENDBUTTON']."</div></a></td></tr>
<tr><td class=loginbutton id='sendtext'><a href=#><div style='height:100%; width:100% display: table; overflow: hidden;'><div style='display: table-cell; text-align: center; vertical-align: middle;'><div style='text-align: center; vertical-align: middle;'>".$lang['contact']['PCCONTACTSENDBUTTON']."</div></div></div></a></td></tr>
<tr><td class=loginbutton id='sendtext'><a href=#><div style='height:100%; width:100% overflow: hidden;'><div style='text-align: center; vertical-align: middle;'><div>".$lang['contact']['PCCONTACTSENDBUTTON']."</div></div></div></a></td></tr>
<tr><td class=loginbutton id='sendtext'><a href=#><div style='width:100% overflow: hidden;'><div style='text-align: center; vertical-align: middle;'>".$lang['contact']['PCCONTACTSENDBUTTON']."</div></div></a></td></tr>
</table>

以及相关的CSS代码：

.loginbutton { font-weight: normal; text-align: center; vertical-align: middle; height: 26px; width: 150px; cursor: pointer; background-color: #d26628; color: #ffffff; font-size: 13px; }
.loginbutton a:link, a:visited, a:active { font-weight: normal; color: #ffffff; font-size: 13px; }
.loginbutton a:hover { font-weight: bold;}
.loginbutton:hover{ font-weight: bold; }

注意：我绝不是CSS专家;-)

PS：Stack Overflow（屏幕顶部）上的菜单li元素不像这个btw，只能用鼠标访问 - 认为它是错误的。

Answer 1

Best solution

html

<table border="1" width="100%">
    <tr>
        <td>Stuff<br><br></td>
        <td>
            <a href="page.htm"><span> a Link </span></a>
        </td>
        <td>Stuff</td>
    </tr>
</table>

CSS

td {
    height: 100%;
}
a {
    display: table;
    position: relative;
    height: 100%;
    width: 100%;
    background-color: yellow;
}
span {
    display: table-cell;
    text-align:center;
    vertical-align: middle;
    background-color: red;
}

http://jsfiddle.net/74Wxn/

Note:

在td上需要height="100%"，你也可以将它添加到css中

Answer 2

有多种方法可以做到这一点。这是一个：

如果你想让<a>元素填充整个空间，可以通过将display属性设置为inline-block并将宽度和高度设置为100％来实现。

所以，例如：

HTML

<table>
    <tr>
        <td>Stuff</td>
        <td><a href="http://www.example.com">A Link!</a></td>
        <td>More Stuff</td>
    </tr>
</table>

CSS

table td
{
    text-align: center; /*Aligns all content of td elements to center*/
}

table td a
{
    display: inline-block; /*Behaves like a div, but can be placed inline*/
    width: 100%; /*Full width of parent*/
    height: 100%; /*Full height of parent*/
    text-align: center; /*Centers content*/
}

The Fiddle

Answer 3

<style>
a {
    display: block;
    position: relative;
    height: 100%;
    background-color: yellow;
}
span {
    display: block;
    height: 50%;
    position: absolute;
    overflow: auto;
    margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;
    text-align:center;
    background-color: red;
}
</style>

<table border="1" width="100%">
    <tr>
        <td>Stuff<br><br></td>
        <td height="100%" width="30%">
            <a href="http://www.google.com" target="_blank">
                <span>A Link to Google!</span>
            </a>
        </td>
        <td>Stuff</td>
    </tr>
</table>

Answer 4

我想你需要这个

<td align="center"><a href=""></a></td>