ฉันใช้ Bootstrap และสิ่งต่อไปนี้ใช้ไม่ได้:

<tbody>
    <a href="#">
        <tr>
            <td>Blah Blah</td>
            <td>1234567</td>
            <td>£158,000</td>
        </tr>
    </a>
</tbody>

ผู้เขียนบันทึกฉัน:

โปรดดูคำตอบอื่น ๆ ด้านล่างโดยเฉพาะคำตอบที่ไม่ใช้ jQuery

หมายเหตุผู้เขียน II:

เก็บรักษาไว้เพื่อลูกหลาน แต่แน่นอนว่าวิธีการที่ผิดในปี 2020 (ไม่ใช่สำนวนแม้กระทั่งในปี 2017)

คำตอบเดิม

คุณใช้ Bootstrap ซึ่งหมายความว่าคุณใช้ jQuery: ^) ดังนั้นวิธีหนึ่งในการทำคือ:

<tbody>
    <tr class='clickable-row' data-href='url://'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
</tbody>


jQuery(document).ready(function($) {
    $(".clickable-row").click(function() {
        window.location = $(this).data("href");
    });
});

แน่นอนคุณไม่จำเป็นต้องใช้ href หรือสลับตำแหน่งคุณสามารถทำสิ่งที่คุณต้องการในฟังก์ชั่นตัวจัดการคลิก อ่านบนjQueryและวิธีการเขียนตัวจัดการ;

ข้อดีของการใช้คลาสมากกว่าidคือคุณสามารถใช้โซลูชันกับหลายแถว:

<tbody>
    <tr class='clickable-row' data-href='url://link-for-first-row/'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
    <tr class='clickable-row' data-href='url://some-other-link/'>
        <td>More money</td> <td>1234567</td> <td>£800,000</td>
    </tr>
</tbody>

และฐานรหัสของคุณจะไม่เปลี่ยนแปลง ผู้ดูแลเดียวกันจะดูแลทุกแถว

ตัวเลือกอื่น

คุณสามารถใช้ Bootstrap jQuery callbacks เช่นนี้ (ในการdocument.readyติดต่อกลับ):

$("#container").on('click-row.bs.table', function (e, row, $element) {
    window.location = $element.data('href');
});

นี่คือข้อดีของการไม่ถูกรีเซ็ตเมื่อเรียงลำดับตาราง (ซึ่งเกิดขึ้นกับตัวเลือกอื่น)

บันทึก

เนื่องจากสิ่งนี้ถูกโพสต์window.document.locationล้าสมัย (หรือเลิกใช้อย่างน้อยที่สุด) ใช้window.locationแทน

คุณทำอย่างนั้นไม่ได้ เป็น HTML ที่ไม่ถูกต้อง คุณไม่สามารถใส่<a>a <tbody>และ a <tr>ได้ ลองใช้สิ่งนี้แทน:

<tr onclick="window.location='#';">
        ...
     </tr>

เพิ่มสไตล์สำหรับมุมมองตัวชี้

[data-href] { cursor: pointer; }

เมื่อคุณทำงานได้คุณจะต้องใช้ JavaScript เพื่อกำหนดตัวจัดการการคลิกด้านนอกของ HTML

คุณสามารถรวมสมอในทุก<td>อย่างเช่น:

<tr>
  <td><a href="#">Blah Blah</a></td>
  <td><a href="#">1234567</a></td>
  <td><a href="#">more text</a></td>
</tr>

จากนั้นคุณสามารถใช้display:block;กับจุดยึดเพื่อทำให้คลิกได้ทั้งแถว

tr:hover { 
   background: red; 
}
td a { 
   display: block; 
   border: 1px solid black;
   padding: 16px; 
}

ตัวอย่าง jsFiddle ที่นี่

นี่อาจเป็นเรื่องดีที่สุดเท่าที่คุณจะได้รับเว้นแต่ว่าคุณจะใช้จาวาสคริปต์

แถวของตารางที่เชื่อมโยงเป็นไปได้ แต่ไม่สามารถใช้ได้กับ<table>องค์ประกอบมาตรฐาน คุณสามารถทำได้โดยใช้display: tableคุณสมบัติสไตล์ ที่นี่และที่นี่เป็นปริศนาที่จะแสดงให้เห็น

รหัสนี้ควรทำเคล็ดลับ:

.table {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 10px;
}

.row:hover {
  background-color: #cccccc;
}

.cell:hover {
  background-color: #e5e5e5;
}

<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />

<div role="grid" class="table">
  <div role="row" class="row">
    <div role="gridcell" class="cell">
      1.1
    </div>
    <div role="gridcell" class="cell">
      1.2
    </div>
    <div role="gridcell" class="cell">
      1.3
    </div>
  </div>

  <a role="row" class="row" href="#">
    <div role="gridcell" class="cell">
      2.1
    </div>
    <div role="gridcell" class="cell">
      2.2
    </div>
    <div role="gridcell" class="cell">
      2.3
    </div>
  </a>
</div>

โปรดทราบว่าจำเป็นต้องมีบทบาท ARIA เพื่อให้แน่ใจว่าสามารถเข้าถึงได้อย่างเหมาะสมเนื่องจาก<table>ไม่ได้ใช้องค์ประกอบมาตรฐาน คุณอาจต้องเพิ่มบทบาทเพิ่มเติมเช่นrole="columnheader"ถ้ามี ค้นหาข้อมูลเพิ่มเติมได้ที่คู่มือที่นี่

ประสบความสำเร็จในการใช้ Bootstrap 4.3+ มาตรฐานดังต่อไปนี้ - ไม่ต้องใช้ jQuery หรือ CSS พิเศษใด ๆ !

กุญแจสำคัญคือการใช้stretched-linkกับข้อความภายในเซลล์และกำหนด<tr>เป็นบล็อกที่มี

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-hover">
  <tbody>
    <tr style="transform: rotate(0);">
    <th scope="row"><a href="#" class="stretched-link">1</a></th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

คุณสามารถกำหนดให้มีบล็อกในวิธีที่แตกต่างกันตัวอย่างเช่นการตั้งค่าที่transformจะไม่มีค่า (เช่นในตัวอย่างข้างต้น)

สำหรับข้อมูลเพิ่มเติมอ่านได้ที่นี่เป็นเอกสารเงินทุนstretched-linkสำหรับ

โซลูชันที่มีความยืดหยุ่นมากขึ้นคือการกำหนดเป้าหมายทุกอย่างด้วยแอตทริบิวต์ data-href นี่คือคุณสามารถนำรหัสกลับมาใช้ใหม่ได้อย่างง่ายดายในที่ต่างๆ

<tbody>
    <tr data-href="https://google.com">
        <td>Col 1</td>
        <td>Col 2</td>
    </tr>
</tbody>

จากนั้นใน jQuery ของคุณเพียงกำหนดเป้าหมายองค์ประกอบใด ๆ ด้วยแอตทริบิวต์นั้น:

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

และอย่าลืมใส่สไตล์ของคุณ:

[data-href] {
    cursor: pointer;
}

ตอนนี้คุณสามารถเพิ่ม data-href attribute ให้กับองค์ประกอบใดก็ได้และมันจะทำงาน เมื่อฉันเขียนตัวอย่างเช่นนี้ฉันชอบให้พวกเขามีความยืดหยุ่น รู้สึกอิสระที่จะเพิ่มวิธีการแก้ปัญหาวานิลลา js นี้ถ้าคุณมี

คุณสามารถใช้ส่วนประกอบบู๊ตสแตรปนี้:

http://jasny.github.io/bootstrap/javascript/#rowlink

Jasny Bootstrap

ส่วนประกอบที่ขาดหายไปสำหรับเฟรมเวิร์กส่วนหน้าสุดโปรดของคุณ

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr><th>Name</th><th>Description</th><th>Actions</th></tr>
  </thead>
  <tbody data-link="row" class="rowlink">
    <tr><td><a href="#inputmask">Input mask</a></td><td>Input masks can be used to force the user to enter data conform a specific format.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
    <tr><td><a href="http://www.jasny.net/" target="_blank">jasny.net</a></td><td>Shared knowledge of Arnold Daniels aka Jasny.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
    <tr><td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a></td><td>Toggle a modal via JavaScript by clicking this row.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
  </tbody>
</table>

การใช้

ผ่านแอตทริบิวต์ข้อมูล

เพิ่มคลาส.rowlinkและคุณลักษณะdata-link="row"ให้กับองค์ประกอบ<table>หรือ <tbody>สำหรับตัวเลือกอื่น ๆ ต่อท้ายชื่อเป็น DATA- ในขณะที่data-target="a.mainlink"เซลล์สามารถได้รับการยกเว้นโดยการเพิ่มระดับไป.rowlink-skip<td>

ผ่านทาง JavaScript

เรียกรูปแบบการป้อนข้อมูลผ่าน javascript:

$('tbody.rowlink').rowlink()

มีวิธีที่ดีในการทำ<a>แท็กภายใน<tr>ซึ่งอาจไม่ถูกต้องทางความหมาย (อาจให้คำเตือนเบราว์เซอร์) แต่จะทำงานโดยไม่JavaScript/jQueryจำเป็น:

<!-- HTML -->
<tbody>
  <tr class="bs-table-row">
     <td>Blah Blah</td>
     <td>1234567</td>
     <td>£158,000</td>
     <a class="bs-row-link" href="/your-link-here"></a>
  </tr>
</tbody>

/* CSS */
.bs-table-row {
  position: 'relative';
}

.bs-row-link {
  position: 'absolute';
  left: 0;
  height: '36px'; // or different row height based on your requirements
  width: '100%';
  cursor: 'pointer';
}

PS: สังเกตเคล็ดลับที่นี่คือการใส่<a>แท็กเป็นองค์ประกอบสุดท้ายมิฉะนั้นจะพยายามใช้พื้นที่ของ<td>เซลล์แรก

PPS: ตอนนี้แถวทั้งหมดของคุณจะสามารถคลิกได้และคุณสามารถใช้ลิงก์นี้เพื่อเปิดในแท็บใหม่ได้เช่นกัน (Ctrl / CMD + คลิก)

คุณสามารถใช้วิธี onclick javascript ใน tr และทำให้เป็นแบบคลิกได้นอกจากนี้หากคุณต้องการสร้างลิงค์ของคุณเนื่องจากรายละเอียดบางอย่างคุณสามารถประกาศฟังก์ชั่นใน javascript และเรียกมันใน onclick ผ่านค่าบางอย่าง

นี่คือวิธีโดยการใส่องค์ประกอบโปร่งใสเหนือแถวตาราง ข้อดีคือ:

• เป็นองค์ประกอบลิงก์จริง: เมื่อตัวชี้การเปลี่ยนแปลงโฮเวอร์แสดงลิงก์เป้าหมายในแถบสถานะสามารถนำทางผ่านแป้นพิมพ์สามารถเปิดได้ในแท็บหรือหน้าต่างใหม่ URL สามารถคัดลอกได้ ฯลฯ
• ตารางจะมีลักษณะเหมือนกับไม่มีการเพิ่มลิงค์
• ไม่มีการเปลี่ยนแปลงในรหัสตาราง

ข้อเสีย:

• ขนาดขององค์ประกอบ A จะต้องตั้งค่าในสคริปต์ทั้งในการสร้างและหลังการเปลี่ยนแปลงขนาดของแถวที่ครอบคลุม (มิฉะนั้นจะสามารถทำได้โดยไม่มี JavaScript เลยเลยซึ่งยังคงเป็นไปได้หากตั้งขนาดตารางไว้ด้วย ใน HTML หรือ CSS)

โต๊ะยังคงสภาพเดิม:

<table id="tab1">
<tbody>
        <tr>
            <td>Blah Blah</td>
            <td>1234567</td>
            <td>£158,000</td>
        </tr>
</tbody>
</table>

เพิ่มลิงก์ (สำหรับแต่ละแถว) ผ่าน jQuery JavaScript โดยการใส่องค์ประกอบ A ลงในแต่ละคอลัมน์แรกและตั้งค่าคุณสมบัติที่ต้องการ:

// v1, fixed for IE and Chrome
// v0, worked on Firefox only
// width needed for adjusting the width of the A element
var mywidth=$('#tab1').width();

$('#tab1 tbody>tr>td:nth-child(1)').each(function(index){
    $(this).css('position',  'relative');// debug: .css('background-color', '#f11');
    // insert the <A> element
    var myA=$('<A>');
    $(this).append(myA);
    var myheight=$(this).height();

    myA.css({//"border":'1px solid #2dd', border for debug only
            'display': 'block',
            'left': '0',
            'top': '0',
            'position':  'absolute'
        })
        .attr('href','the link here')
        .width(mywidth)
        .height(myheight)
        ;
    });

การตั้งค่าความกว้างและความสูงอาจเป็นเรื่องยากหากใช้การขยายและเว้นระยะห่างจำนวนมาก แต่โดยทั่วไปแล้วการปิดพิกเซลเพียงไม่กี่พิกเซลก็ไม่ควรทำเช่นนั้น

การสาธิตสดที่นี่: http://jsfiddle.net/qo0dx0oo/ (ทำงานใน Firefox แต่ไม่ใช่ IE หรือ Chrome มีลิงก์อยู่ในตำแหน่งที่ไม่ถูกต้อง)

แก้ไขสำหรับ Chrome และ IE (ยังใช้งานได้ใน FF ด้วย): http://jsfiddle.net/qo0dx0oo/2/

คุณสามารถเพิ่มบทบาทปุ่มลงในแถวของตารางและ Bootstrap จะเปลี่ยนเคอร์เซอร์โดยไม่มีการเปลี่ยนแปลง CSS ใด ๆ ฉันตัดสินใจที่จะใช้บทบาทนั้นเป็นวิธีที่จะทำให้แถวคลิกได้ง่าย ๆ ด้วยรหัสน้อยมาก

html

<table class="table table-striped table-hover">
     <tbody>
          <tr role="button" data-href="#">
               <td>Cell 1</td>
               <td>Cell 2</td>
               <td>Cell 3</td>
          </tr>
     </tbody>
</table>

jQuery

$(function(){
     $(".table").on("click", "tr[role=\"button\"]", function (e) {
          window.location = $(this).data("href");
     });
});

คุณสามารถใช้หลักการเดียวกันนี้เพื่อเพิ่มบทบาทปุ่มให้กับแท็กใด ๆ

ตะโกนรหัสนี้จะทำให้ตารางทั้งหมดของคุณคลิกได้ การคลิกลิงก์ในตัวอย่างนี้จะแสดงลิงค์ในกล่องโต้ตอบการแจ้งเตือนแทนที่จะไปตามลิงค์

HTML:

นี่คือ HTML ที่อยู่เบื้องหลังตัวอย่างด้านบน:

    <table id="example">
    <tr>
     <th>&nbsp;</th>
     <th>Name</th>
     <th>Description</th>
     <th>Price</th>
   </tr>
   <tr>
     <td><a href="apples">Edit</a></td>
     <td>Apples</td>
     <td>Blah blah blah blah</td>
     <td>10.23</td>
   </tr>
    <tr>
     <td><a href="bananas">Edit</a></td>
     <td>Bananas</td>
     <td>Blah blah blah blah</td>
     <td>11.45</td>
   </tr>
   <tr>
     <td><a href="oranges">Edit</a></td>
     <td>Oranges</td>
     <td>Blah blah blah blah</td>
     <td>12.56</td>
   </tr>
    </table>

CSS

และ CSS:

    table#example {
    border-collapse: collapse;   
}
#example tr {
    background-color: #eee;
    border-top: 1px solid #fff;
}
#example tr:hover {
    background-color: #ccc;
}
#example th {
    background-color: #fff;
}
#example th, #example td {
    padding: 3px 5px;
}
#example td:hover {
    cursor: pointer;
}

jQuery

และในที่สุด jQuery ซึ่งทำให้เวทมนตร์เกิดขึ้น:

    $(document).ready(function() {

    $('#example tr').click(function() {
        var href = $(this).find("a").attr("href");
        if(href) {
            window.location = href;
        }
    });

});

สิ่งที่ทำคือเมื่อคลิกแถวการค้นหาจะดำเนินการกับ href ที่เป็นของสมอ หากพบหนึ่งตำแหน่งของหน้าต่างจะถูกตั้งค่าเป็น href นั้น

ตัวเลือกที่ง่ายมากคือใช้เมื่อคลิกและถูกต้องมากขึ้นในมุมมองของฉันเพราะนี่เป็นการแยกมุมมองและตัวควบคุมและคุณไม่จำเป็นต้องเขียนโค้ด URL หรืออะไรก็ตามที่คุณต้องทำให้สำเร็จด้วยการคลิก . มันทำงานร่วมกับ Angular ng-click ด้วย

<table>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
</table>

<script>
function myFunction(x) {
    alert("Row index is: " + x.rowIndex);
}
</script>

ตัวอย่างการทำงานที่นี่

นี่คือทางออกที่ง่าย ..

<tr style='cursor: pointer; cursor: hand;' onclick="window.location='google.com';"></tr>

ตัวเลือกอื่นโดยใช้<a>ตำแหน่ง CSS และบาง jQuery หรือ JS :

HTML:

<table>
<tr>
    <td>
        <span>1</span>
        <a href="#" class="rowLink"></a>
    </td>
    <td><span>2</span></td>
</tr>
</table>

CSS:

table tr td:first-child {
    position: relative;
}
a.rowLink {
    position: absolute;
    top: 0; left: 0;
    height: 30px;
}
a.rowLink:hover {
    background-color: #0679a6;
    opacity: 0.1;
}

จากนั้นคุณต้องกำหนดความกว้างโดยใช้ตัวอย่างเช่น jQuery:

    $(function () {
        var $table = $('table');
            $links = $table.find('a.rowLink');

        $(window).resize(function () {
            $links.width($table.width());
        });

        $(window).trigger('resize');
    });

ฉันรู้ว่าบางคนเขียนเหมือนกันมากแล้วอย่างไรก็ตามวิธีของฉันเป็นวิธีที่ถูกต้อง (div ไม่สามารถเป็นลูกของ A) และควรใช้คลาส

คุณสามารถเลียนแบบตารางโดยใช้ CSS และทำให้องค์ประกอบ A เป็นแถว

<div class="table" style="width:100%;">
  <a href="#" class="tr">
    <span class="td">
      cell 1
    </span>
    <span class="td">
      cell 2
    </span>
  </a>
</div>

CSS:

.table{display:table;}
.tr{display:table-row;}
.td{display:table-cell;}
.tr:hover{background-color:#ccc;}

ฉันต้องการที่จะใช้onclick=""คุณลักษณะเนื่องจากมันใช้งานง่ายและเข้าใจสำหรับมือใหม่ชอบ

 <tr onclick="window.location='any-page.php'">
    <td>UserName</td>
    <td>Email</td>
    <td>Address</td>
</tr>

คำตอบที่ได้รับการยอมรับนั้นดี แต่ฉันเสนอทางเลือกเล็กน้อยหากคุณไม่ต้องการทำซ้ำ url ในทุกๆ tr ดังนั้นคุณใส่ url หรือ href ในตาราง data-url ไม่ใช่ tr

<table data-click data-url="href://blah">    
    <tbody>
        <tr id ="2">
            <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
        </tr>
        <tr id ="3">
            <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
        </tr>
    </tbody>
    </table

jQuery(document).ready(function($) {
    $('[data-click] tbody tr').click(function() {
        var url = $(this).closest('table').data("url");
        var id = $(this).closest('tr').attr('id');
        window.location = url+"?id="+id);
    });
});

และนี่ก็เป็นสิ่งที่ดีเพราะคุณไม่จำเป็นต้องเพิ่มแอตทริบิวต์ข้อมูลการคลิกให้กับทุก ๆ tr สิ่งที่ดีอีกอย่างคือเราไม่ได้ใช้คลาสเพื่อกระตุ้นการคลิกเนื่องจากคลาสควรใช้สำหรับการจัดแต่งทรงผมเท่านั้น

ทางออกหนึ่งที่ไม่ได้กล่าวถึงก่อนหน้าคือการใช้ลิงค์เดียวในเซลล์และ CSS บางอันเพื่อขยายลิงก์นี้ไปยังเซลล์:

table {
  border: 1px solid;
  width: 400px;
  overflow: hidden;
}

tr:hover {
  background: gray;
}

tr td {
  border: 1px solid;
}

tr td:first-child {
  position:relative;
}

a:before {
  content: '';
  position:absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: block;
  width: 400px;
}

<table>
  <tr>
    <td><a href="https://google.com">First column</a></td>
    <td>Second column</td>
    <td>Third column</td>
  </tr>
  <tr>
    <td><a href="https://stackoverflow.com">First column</a></td>
    <td>Second column</td>
    <td>Third column</td>
  </tr>
</table>

<tbody>
    <tr data-href='www.bbc.co.uk'>
        <td>Blah Blah</td>
        <td>1234567</td>
        <td>£158,000</td>
    </tr>
    <tr data-href='www.google.com'>
        <td>Blah Blah</td>
        <td>1234567</td>
        <td>£158,000</td>
    </tr>
</tbody>

<script>
    jQuery(document).ready(function ($) {
        $('[data-href]').click(function () {
            window.location = $(this).data("href");
        });
    });
</script>

ในขณะที่วิธีแก้ปัญหาหลักของที่นี่ยอดเยี่ยมโซลูชันของฉันไม่จำเป็นต้องใช้ในชั้นเรียนอีกต่อไป สิ่งที่คุณต้องทำคือเพิ่มคุณสมบัติ data-href ด้วย URL ในนั้น

ฉันใช้เวลาพยายามแก้ปัญหานี้เป็นจำนวนมาก

มี 3 วิธีคือ

1. ใช้จาวาสคริปต์ ข้อเสียที่ชัดเจน: เป็นไปไม่ได้ที่จะเปิดแท็บใหม่โดยกำเนิดและเมื่อเลื่อนเมาส์ไปวางเหนือแถวจะไม่มีข้อบ่งชี้บนแถบสถานะเหมือนลิงก์ทั่วไปมี การเข้าถึงก็เป็นคำถามเช่นกัน

2. ใช้ HTML / CSS เท่านั้น ที่นี้หมายถึงการวางซ้อนกันในแต่ละ<a> <td>วิธีง่ายๆเช่นซอนี้ใช้ไม่ได้เนื่องจากพื้นผิวที่คลิกได้นั้นไม่จำเป็นสำหรับแต่ละคอลัมน์ นี่เป็นข้อกังวลของ UX ที่ร้ายแรง นอกจากนี้หากคุณต้องการ a <button>ในแถวมันไม่ถูกต้อง HTML เพื่อวางไว้ภายใต้<a>แท็ก (แม้ว่าเบราว์เซอร์จะตกลงกับที่)

   ฉันพบวิธีอื่น 3 วิธีในการใช้วิธีนี้ ครั้งแรกก็โอเคอีกสองคนไม่ดี

   a) ดูตัวอย่างนี้ :

   tr {
     height: 0;
   }
   
   td {
     height: 0;
     padding: 0;
   }
   
   /* A hack to overcome differences between Chrome and Firefox */
   @-moz-document url-prefix() {
     td {
       height: 100%;
     }
   }
   
   a {
     display: block;
     height: 100%;
   }

   มันใช้งานได้ แต่เนื่องจากความไม่สอดคล้องระหว่าง Chrome และ Firefox จึงต้องใช้การแฮ็กเฉพาะเบราว์เซอร์เพื่อเอาชนะความแตกต่าง นอกจากนี้ Chrome จะจัดแนวเนื้อหาของเซลล์ให้อยู่ด้านบนเสมอซึ่งอาจทำให้เกิดปัญหากับข้อความที่ยาวโดยเฉพาะอย่างยิ่งหากมีความสูงของเส้นที่แตกต่างกัน

   ข) การตั้งค่าที่จะ<td> { display: contents; }สิ่งนี้นำไปสู่ ​​2 ปัญหาอื่น ๆ :

   b1 หากมีคนอื่นพยายามจัดสไตล์<td>แท็กโดยตรงเช่นการตั้งค่าให้{ width: 20px; }เราต้องส่งสไตล์นั้นไปยัง<a>แท็ก เราต้องการเวทมนต์ในการทำเช่นนั้นน่าจะเป็นเวทย์มนตร์มากกว่าทางเลือกของจาวาสคริปต์

   b2 { display: contents; }ยังคงทดลองอยู่ โดยเฉพาะมันไม่รองรับ Edge

   ค) การตั้งค่าที่จะ<td> { height: --some-fixed-value; }นี่เป็นเพียงความยืดหยุ่นไม่เพียงพอ

3. วิธีสุดท้ายที่ฉันแนะนำให้คิดอย่างจริงจังคือการไม่ใช้แถวที่คลิกได้เลย แถวที่คลิกได้ไม่ใช่ประสบการณ์ UX ที่ยอดเยี่ยม: มันไม่ง่ายเลยที่จะทำเครื่องหมายด้วยสายตาว่าสามารถคลิกได้และมันท้าทายเมื่อมีหลายส่วนที่สามารถคลิกได้ภายในแถวเช่นปุ่ม ดังนั้นทางเลือกที่ทำงานได้อาจมี<a>แท็กเฉพาะในคอลัมน์แรกซึ่งแสดงเป็นลิงก์ปกติและให้บทบาทในการนำทางทั้งแถว

นี่เป็นอีกวิธีหนึ่ง ...

HTML:

<table>
<tbody>
       <tr class='clickableRow'>
       <td>Blah Blah</td>
       <td>1234567</td>
       <td>£158,000</td>
        </tr>
</tbody>
</table>

The jQuery:

$(function() {
      $(".clickableRow").on("click", function() {
          location.href="http://google.com";

      });

});

<table>
  <tr tabindex="0" onmousedown="window.location='#';">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

แทนที่ # ด้วย url tabindex="0"ทำให้องค์ประกอบใด ๆ สามารถโฟกัสได้

คุณสามารถให้รหัสแถวเช่น

<tr id="special"> ... </tr>

จากนั้นใช้ jquery เพื่อพูดบางสิ่งเช่น:

$('#special').onclick(function(){ window="http://urltolinkto.com/x/y/z";})

ทำไมเราไม่ควรใช้แท็ก "div" ....

<div>

  <a href="" >     <div>  Table row  of content here..  </div>    </a>

</div>