表格就像一个链接

我无法将我的表格行设置为链接。 我只能使用CSS和HTML。 我尝试了不同的东西从行到另一个东西,但仍然无法使其工作。


你有两种方法可以做到这一点:

  • 使用javascript:

    <tr onclick="document.location = 'links.html';">

  • 使用锚点:

    <tr><td><a href="">text</a></td><td><a href="">text</a></td></tr>

  • 我使用了第二部作品:

    table tr td a {
        display:block;
        height:100%;
        width:100%;
    }
    

    为了摆脱列之间的死亡空间:

    table tr td {
        padding-left: 0;
        padding-right: 0;
    }
    

    以下是第二个示例的简单演示: DEMO


    我让自己定制了一个jquery函数:

    HTML

    <tr data-href="site.com/whatever">
    

    jQuery的

    $('tr[data-href]').on("click", function() {
        document.location = $(this).data('href');
    });
    

    对我来说简单而完美。 希望它可以帮助你。

    (我知道OP只需要CSS和HTML,但考虑jQuery)

    编辑

    同意Matt Kantor使用数据attr。 上面编辑的答案


    如果您在支持它的浏览器上,则可以使用CSS将<a>转换为表格行:

    .table-row { display: table-row; }
    .table-cell { display: table-cell; }
    
    <div style="display: table;">
        <a href="..." class="table-row">
            <span class="table-cell">This is a TD... ish...</span>
        </a>
    </div>
    

    当然,你只限于不把块元素放在<a> 。 你也不能将它与普通的<table>混合使用

    链接地址: http://www.djcxy.com/p/15515.html

    上一篇: table row like a link

    下一篇: CSS clearfix problem with Firefox 2 and SeaMonkey