table row like a link

I can't set my table row as link to something. I can use only css and html. I tried different things from div in row to something another, but still can't make it works.


You have two ways to do this:

  • Using javascript:

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

  • Using anchors:

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

  • I made the second work using:

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

    To get rid of the dead space between columns:

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

    Here is a simple demo of the second example: DEMO


    I made myself a custom jquery function:

    Html

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

    jQuery

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

    Easy and perfect for me. Hopefully it helps you.

    (I know OP want CSS and HTML only, but consider jQuery)

    Edit

    Agreed with Matt Kantor using data attr. Edited answer above


    If you're on a browser that supports it you can use CSS to transform the <a> into a table row:

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

    Of course, you're limited to not putting block elements inside the <a> . You also can't mix this in with a regular <table>

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

    上一篇: 为什么破折号首选CSS选择器/ HTML属性?

    下一篇: 表格就像一个链接