【问题标题】:CSS HTML how to remove whole cell links in tables?CSS HTML如何删除表格中的整个单元格链接?
【发布时间】:2014-08-10 23:11:09
【问题描述】:

我想获得一个带有页脚的网页,其中有垂直对齐的链接。 因此,我使用了一个表格,在其中写下我的链接,例如“Mobile”、“Help”、“Terms”……

问题是当鼠标指向表格时,链接是活动的(甚至在空单元格上)。当我将鼠标指向名称“Mobile”、“Help”、“Terms”时,我只想拥有链接——而不是当我指向单元格的其余部分时,也不是桌子上的任何其他地方。

我通过 Stackoverflow 研究了这个东西,但总是遇到相反的问题(人们想要激活单元链接)。

有人可以帮忙吗?代码如下。

HTML 代码

    <div id="footer">
<div class = "box2">
    <h6><a href="/error">Français</h6>
    <h6><a href="/error">English (US)</h6>
    <h6><a href="/error">Español</h6>
    <h6><a href="/error">Português (Brasil)</h6>
    <h6><a href="/error">Deutsch</h6>
    <h6><a href="/error">Italiano</h6>
    <h6><a href="/error">Русский</h6>
</div>

    <div class = "box3">
        <table class="table2">
            <tr>
                <td><h6><a href="/mobile">Mobile</h6></td>
                <td><h6><a href="/help">Help</h6></td>
                <td><h6><a href="/term">Terms and conditions</h6></td>
                <td><h6><a href="/developers">Developers</h6></td>
                <td><h6><a href="/carriers">Carriers</h6></td>
                <td><h6><a href="/other">Other</h6></td>
            </tr>
            <tr>
                <td><h6><a href="/blog">Blog</h6></td>
                <td><h6><a href="/findus">Find us</h6></td>
                <td><h6><a href="/pics">Pics</h6></td>
            </tr>
        </table>

    </div>
        </div>

CSS 代码

#footer {
    height: 110px;
    background: #80B2E6;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#80B2E6), color-stop(100%,#3385D6));
    background: -moz-linear-gradient(top, #80B2E6 0%, #3385D6 100%);
    background: -webkit-linear-gradient(top, #80B2E6 0%, #3385D6 100%);
    background: -o-linear-gradient(top, #80B2E6 0%, #3385D6 100%);
    background: -ms-linear-gradient(top, #80B2E6 0%, #3385D6 100%);
    background: linear-gradient(top, #80B2E6 0%, #3385D6 100%);
}

.box2
{
    width:800px;
    border-bottom:1px solid lightgrey;
    display:inline-block;
    padding-top:20px;
}

.box3
{
    width:800px;
    padding:0;
}


.table2 {
    width:450px;
    padding:0;
    font-size:11px;
    table-layout: auto;
    float:left;
    border-collapse:collapse;

}


h6 {
    font-weight: normal;
    font-size: 11px;
    max-width: 800px;
    color: white;
    margin:0;
    padding-bottom:3px;
    padding-right:10px;
    /*display:inline-block;*/
    float:left;
}

h6 a:link {
    color:white;
}

.table2 td a {
    color:white;
    display:inline;
}

a:link {
    text-decoration:none;
    color: #54544B;
}

table {
    width:420px;
    /*height: 200px;*/
    padding:10px;
    margin-bottom:10px;
    border-collapse:collapse;
    table-layout: fixed;
}

td
{
    text-align:center;
    position:center;
    padding-top: 3px;
    padding-bottom: 3px;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word;
}

tr, div {

}

【问题讨论】:

  • 关闭你的&lt;a href&gt;...&lt;/a&gt; 我认为没问题 :)
  • 嘿,谢谢,但这并不能解决问题...
  • 我只是关闭了&lt;a&gt; 标签就可以了。看jsfiddle

标签: html css hyperlink html-table


【解决方案1】:

&lt;/a&gt; 关闭所有链接标签。比如改变

<td><h6><a href="/mobile">Mobile</h6></td>

<td><h6><a href="/mobile">Mobile</a></h6></td>

以及所有链接的其余部分

【讨论】:

  • 实际上,是的,它解决了它 - 不知何故,我的 html 文件做错了...谢谢大家!
猜你喜欢
  • 2018-01-27
  • 1970-01-01
  • 2013-03-26
  • 1970-01-01
  • 2019-03-14
  • 1970-01-01
  • 2012-01-19
  • 2019-10-15
  • 2021-07-06
相关资源
最近更新 更多