Geek Answers Handbook

What is the most standard and compatible way to make an entire table row a link?

Obviously, you cannot just surround a tag <tr>with a tag <a>and call it day; it is invalid and does not even work. I saw JavaScript used, but what happens with browsers that don't support JavaScript? What is the best way to make an entire row table a <tr>link?

Edit: at the request of Lerxst, an example of a table with several rows is given:

<table>
    <thead>
        <tr><th>Name</th><th>Number of widgets</th></tr>
    </thead>
    <tbody>
        <tr><td>Bob Smith</td><td>Three</td></tr>
        <tr><td>Chuck Norris</td><td>Infinity+1</td></tr>
    </tbody>
</table>
+5
source share
5 answers

, (, ), :

 tr.onclick = function (e) {
     location.href = this.getElementsByTagName('a')[0].href;
 }

, JS, .

, , , . , , , YUI jQuery.

+4

Javascript . - , - ( <a> - <a>, <tr> - <tr>). "" , . , , - <a> . edit: , , <a> , ; , display: block .

Javascript.

+1

, JavaScript:

<style type="text/css">
.table {
    border-collapse:collapse;
    border-spacing:0;
    display:table;
}
 .table .row {
    display:table-row;
}
 .table .cell {
    display:table-cell;
}    
</style>

<section class="table">
  <a class="row" href="#">
    <div class="cell">
      A
    </div>
    <div class="cell">
      B
    </div>
    <div class="cell">
      C
    </div>
  </a>
</section>
+1

, , , CSS , , ,

, JS , JS , .

0
<html><head>
    <style type="text/css">
    table a { display: block; }
    table a:hover { background: yellow; }
    .name { display: block; float: left; width: 300px; }
    </style>

</head><body>
        <table>
        <thead>
            <tr><th class="name">Name</th><th>Number of widgets</th></tr>
        </thead>
        <tbody>
            <tr><td colspan="2"><a href="#"><span class="name">Bob Smith</span>Three</a></td></tr>
            <tr><td colspan="2"><a href="#"><span class="name">Bob Smith</span>Three</a></td></tr>
        </tbody>
    </table>

</body></html>
0

More articles:


All Articles