how to make a whole row in a table clickable as a link

Question

I m using Bootstrap and the following doesn t work    lt tbody gt       lt a href     gt           lt tr gt               lt td gt Blah Blah lt  td gt               lt td gt 1234567 lt  td gt               lt td gt   158 000 lt  td gt           lt  tr gt       lt  a gt   lt  tbody gt

User · Answer

One solution that was not mentioned earlier is to use a single link in a cell and some CSS to extend this link over the cells:

_x000D_

table {_x000D_
  border: 1px solid;_x000D_
  width: 400px;_x000D_
  overflow: hidden;_x000D_
}_x000D_
_x000D_
tr:hover {_x000D_
  background: gray;_x000D_
}_x000D_
_x000D_
tr td {_x000D_
  border: 1px solid;_x000D_
}_x000D_
_x000D_
tr td:first-child {_x000D_
  position:relative;_x000D_
}_x000D_
_x000D_
a:before {_x000D_
  content: '';_x000D_
  position:absolute;_x000D_
  left: 0;_x000D_
  top: 0;_x000D_
  bottom: 0;_x000D_
  display: block;_x000D_
  width: 400px;_x000D_
}

_x000D_

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

_x000D_

User · Answer

Another option using an  lt a gt   CSS positions and some jQuery or JS   HTML     lt table gt   lt tr gt       lt td gt           lt span gt 1 lt  span gt           lt a href     class  rowLink  gt  lt  a gt       lt  td gt       lt td gt  lt span gt 2 lt  span gt  lt  td gt   lt  tr gt   lt  table gt    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      Then you need to give the  a width  using for example jQuery         function              var  table      table                 links    table find  a rowLink               window  resize function                   links width  table width                            window  trigger  resize

User · Answer

Here s an article that explains how to approach doing this in 2020  https   www robertcooper me table-row-links The article explains 3 possible solutions   Using JavaScript  Wrapping all table cells with anchorm elements  Using  lt div gt  elements instead of native HTML table elements in order to have tables rows as  lt a gt  elements   The article goes into depth on how to implement each solution  with links to CodePens  and also considers edge cases  such as how to approach a situation where you want to add links inside you table cells  having nested  lt a gt  elements is not valid HTML  so you need to workaround that   As  gameliela pointed out  it may also be worth trying to find an approach where you don t make your entire row a link  since it will simplify a lot of things  I do  however  think that it can be a good user experience to have an entire table row clickable as a link since it is convenient for the user to be able to click anywhere on a table to navigate to the corresponding page

User · Answer

Here is another way     The HTML    lt table gt   lt tbody gt          lt tr class  clickableRow  gt          lt td gt Blah Blah lt  td gt          lt td gt 1234567 lt  td gt          lt td gt   158 000 lt  td gt           lt  tr gt   lt  tbody gt   lt  table gt    The jQuery     function               clickableRow   on  click   function               location href  http   google com

User · Answer

This code bellow will make your whole table clickable  Clicking the links in this example will show the link in an alert dialog instead of following the link   The HTML   Here s the HTML behind the above example        lt table id  example  gt       lt tr gt        lt th gt  amp nbsp  lt  th gt        lt th gt Name lt  th gt        lt th gt Description lt  th gt        lt th gt Price lt  th gt      lt  tr gt      lt tr gt        lt td gt  lt a href  apples  gt Edit lt  a gt  lt  td gt        lt td gt Apples lt  td gt        lt td gt Blah blah blah blah lt  td gt        lt td gt 10 23 lt  td gt      lt  tr gt       lt tr gt        lt td gt  lt a href  bananas  gt Edit lt  a gt  lt  td gt        lt td gt Bananas lt  td gt        lt td gt Blah blah blah blah lt  td gt        lt td gt 11 45 lt  td gt      lt  tr gt      lt tr gt        lt td gt  lt a href  oranges  gt Edit lt  a gt  lt  td gt        lt td gt Oranges lt  td gt        lt td gt Blah blah blah blah lt  td gt        lt td gt 12 56 lt  td gt      lt  tr gt       lt  table gt    The CSS  And the 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      The jQuery  And finally the jQuery which makes the magic happen         document  ready function              example tr   click function             var href     this  find  a   attr  href            if href                window location   href                           What it does is when a row is clicked  a search is done for the href belonging to an anchor  If one is found  the window s location is set to that href

User · Answer

I ve invested a lot of time trying to solve this problem   There are 3 approaches    Use JavaScript  The clear drawbacks  it s not possible to open a new tab natively  and when hovering over the row there will be no indication on status bar like regular links have  Accessibility is also a question  Use HTML CSS only  This means putting  lt a gt  nested under each  lt td gt   A simple approach like this fiddle doesn t work - Because the clickable surface is not necessarily equal for each column  This is a serious UX concern  Also  if you need a  lt button gt  on the row  it is not valid HTML to nest it under  lt a gt  tag  although browsers are ok with that    I ve found 3 other ways to implement this approach  First is ok  the other two are not great   a  Have a look on this example   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       It works  but due to inconsistencies between Chrome and Firefox it requires browser-specific hack to overcome the differences  Also Chrome will always align the cell content to the top  which can cause problems with long texts  especially if varying line heights are involved    b  Setting  lt td gt  to   display  contents     This leads to 2 other problems   b1  If someone else tries to style directly the  lt td gt  tag  like setting it to   width  20px     we need to pass that style somehow to the  lt a gt  tag  We need some magic to do that  probably more magic than in the Javascript alternative   b2    display  contents    is still experimental  specifically it s not supported on Edge   c  Setting  lt td gt  to   height  --some-fixed-value     This is just not flexible enough  The last approach  which I recommend to seriously thinking of  is to not using clickable rows at all  Clickable rows is not a great UX experience  it s not easy to visually mark them as clickable  and it poses challenges when multiple parts are clickable within the rows  like buttons  So a viable alternative could be to have an  lt a gt  tag only on the first column  displayed as a regular link  and give it the role of navigating the whole row

User · Answer

A much more flexible solution is to target anything with the data-href attribute  This was you can reuse the code easily in different places     lt tbody gt       lt tr data-href  https   google com  gt           lt td gt Col 1 lt  td gt           lt td gt Col 2 lt  td gt       lt  tr gt   lt  tbody gt    Then in your jQuery just target any element with that attribute   jQuery document  ready function               data-href    on  click   function             window location     this  data  href                  And don t forget to style your css    data-href        cursor  pointer      Now you can add the data-href attribute to any element and it will work  When I write snippets like this I like them to be flexible  Feel free to add a vanilla js solution to this if you have one

User · Answer

lt tbody gt       lt tr data-href  www bbc co uk  gt           lt td gt Blah Blah lt  td gt           lt td gt 1234567 lt  td gt           lt td gt   158 000 lt  td gt       lt  tr gt       lt tr data-href  www google com  gt           lt td gt Blah Blah lt  td gt           lt td gt 1234567 lt  td gt           lt td gt   158 000 lt  td gt       lt  tr gt   lt  tbody gt    lt script gt      jQuery document  ready function                   data-href    click function                  window location     this  data  href                         lt  script gt    Whilst the main solution on here is great  my solution removes the need for classes  All you need to do is add the data-href attribute with the URL in it

User · Answer

Why should we don t use  div  tags       lt div gt      lt a href     gt       lt div gt   Table row  of content here     lt  div gt      lt  a gt    lt  div gt

User · Answer

lt table gt     lt tr tabindex  0  onmousedown  window location       gt       lt td gt 1 lt  td gt       lt td gt 2 lt  td gt       lt td gt 3 lt  td gt     lt  tr gt   lt  table gt    Replace   with the url  tabindex  0  makes any element focusable

User · Answer

You can use onclick javascript method in tr and make it clickable  also if you need to build your link due to some details you can declare a function in javascript and call it in onclick  passing some values

User · Answer

I know someone has written pretty much the same already  however my way is the correct way  div cannot be child of A  and also it s better to use classes   You can imitate a table using CSS and make an A element the row   lt div class  table  style  width 100    gt     lt a href     class  tr  gt       lt span class  td  gt        cell 1      lt  span gt       lt span class  td  gt        cell 2      lt  span gt     lt  a gt   lt  div gt    css    table display table    tr display table-row    td display table-cell    tr hover background-color  ccc

User · Answer

There is a nice way to technically do it with  lt a gt  tag inside  lt tr gt   which might be semantically incorrect  might give you a browser warning   but will work with no JavaScript jQuery required    lt  -- HTML -- gt   lt tbody gt     lt tr class  bs-table-row  gt        lt td gt Blah Blah lt  td gt        lt td gt 1234567 lt  td gt        lt td gt   158 000 lt  td gt        lt a class  bs-row-link  href   your-link-here  gt  lt  a gt     lt  tr gt   lt  tbody gt      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  Notice the trick here is to put  lt a gt  tag as last element  otherwise it will try to take the space of the first  lt td gt  cell   PPS  Now your entire row will be clickable and you can use this link to open in new tab as well  Ctrl CMD click

User · Answer

Here is a way by putting a transparent A element over the table rows  Advantages are    is a real link element  on hover changes pointer  shows target link in status bar  can be keyboard navigated  can be opened in new tab or window  the URL can be copied  etc the table looks the same as without the link added no changes in table code itself   Disadvantages    size of the A element must be set in a script  both on creation and after any changes to the size of the row it covers  otherwise it could be done with no JavaScript at all  which is still possible if the table size is also set in HTML or CSS    The table stays as is    lt table id  tab1  gt   lt tbody gt           lt tr gt               lt td gt Blah Blah lt  td gt               lt td gt 1234567 lt  td gt               lt td gt   158 000 lt  td gt           lt  tr gt   lt  tbody gt   lt  table gt    Add the links  for each row  via jQuery JavaScript by inserting an A element into each first column and setting the needed properties      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 gt tr gt td nth-child 1    each function index         this  css  position     relative      debug   css  background-color     f11           insert the  lt A gt  element     var myA     lt A gt           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                      The width and height setting can be tricky  if many paddings and margins are used  but in general a few pixels off should not even matter   Live demo here  http   jsfiddle net qo0dx0oo   works in Firefox  but not IE or Chrome  there the link is positioned wrong   Fixed for Chrome and IE  still works in FF too   http   jsfiddle net qo0dx0oo 2

User · Answer

The accepted answer is great  but I propose a small alternative if you don t want to repeat the url on every tr  So you put the url or href in the table data-url and not the tr    lt table data-click data-url  href   blah  gt           lt tbody gt           lt tr id   2  gt               lt td gt Blah Blah lt  td gt   lt td gt 1234567 lt  td gt   lt td gt   158 000 lt  td gt           lt  tr gt           lt tr id   3  gt               lt td gt Blah Blah lt  td gt   lt td gt 1234567 lt  td gt   lt td gt   158 000 lt  td gt           lt  tr gt       lt  tbody gt       lt  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                 This is also good because you don t need to add the click data attribute to every tr either  The other good thing is that we are not using a class to trigger a click as classes should only really be used for styling

User · Answer

Author s note I  Please look at other answers below  especially ones that do not use jquery  Author s note II  Preserved for posterity but surely the wrong approach in 2020   Was non idiomatic even back in 2017  Original Answer You are using Bootstrap which means you are using jQuery      so one way to do it is   lt tbody gt       lt tr class  clickable-row  data-href  url     gt           lt td gt Blah Blah lt  td gt   lt td gt 1234567 lt  td gt   lt td gt   158 000 lt  td gt       lt  tr gt   lt  tbody gt    jQuery document  ready function             quot  clickable-row quot   click function             window location     this  data  quot href quot                 Of course you don t have to use href or switch locations  you can do whatever you like in the click handler function  Read up on jQuery and how to write handlers  Advantage of using a class over id is that you can apply the solution to multiple rows   lt tbody gt       lt tr class  clickable-row  data-href  url   link-for-first-row   gt           lt td gt Blah Blah lt  td gt   lt td gt 1234567 lt  td gt   lt td gt   158 000 lt  td gt       lt  tr gt       lt tr class  clickable-row  data-href  url   some-other-link   gt           lt td gt More money lt  td gt   lt td gt 1234567 lt  td gt   lt td gt   800 000 lt  td gt       lt  tr gt   lt  tbody gt   and your code base doesn t change  The same handler would take care of all the rows  Another option You can use Bootstrap jQuery callbacks like this  in a document ready callback      quot  container quot   on  click-row bs table   function  e  row   element        window location    element data  href         This has the advantage of not being reset upon table sorting  which happens with the other option    Note Since this was posted window document location is obsolete  or deprecated at the very least  use window location instead

User · Answer

You could give the row an id  e g     lt tr id  special  gt       lt  tr gt   and then use jquery to say something like       special   onclick function    window  http   urltolinkto com x y z

User · Answer

You could include an anchor inside every  lt td gt   like so   lt tr gt     lt td gt  lt a href  quot   quot  gt Blah Blah lt  a gt  lt  td gt     lt td gt  lt a href  quot   quot  gt 1234567 lt  a gt  lt  td gt     lt td gt  lt a href  quot   quot  gt more text lt  a gt  lt  td gt   lt  tr gt   You could then use display block  on the anchors to make the full row clickable  tr hover       background  red     td a       display  block      border  1px solid black     padding  16px      Example jsFiddle here  This is probably about as optimum as you re going to get it unless you resort to JavaScript

User · Answer

i would prefer to use onclick    attribute as it is easy to use and understand for newbie like    lt tr onclick  window location  any-page php   gt       lt td gt UserName lt  td gt       lt td gt Email lt  td gt       lt td gt Address lt  td gt   lt  tr gt

User · Answer

You can t do that  It is invalid HTML  You can t put a  lt a gt  in between a  lt tbody gt  and a  lt tr gt   Try this instead    lt tr onclick  window location       gt                    lt  tr gt    add style for pointer view    data-href    cursor  pointer      When you work up to it  you d want to use JavaScript to assign the click handler outside of the HTML

User · Answer

Here is simple solution         lt tr style  cursor  pointer  cursor  hand   onclick  window location  google com    gt  lt  tr gt

User · Answer

A very easy option is just use on-click  and more correct  in my point of view  because this separate the view and controller  and you don t need to hard code the URL or whatever more you need do accomplish with the click  It works with Angular ng-click too    lt table gt     lt tr onclick  myFunction this   gt       lt td gt Click to show rowIndex lt  td gt     lt  tr gt   lt  table gt    lt script gt  function myFunction x        alert  Row index is      x rowIndex      lt  script gt    Exemple working here

User · Answer

You can use this bootstrap component   http   jasny github io bootstrap javascript  rowlink  Jasny Bootstrap  The missing components for your favorite front-end framework    lt table class  table table-striped table-bordered table-hover  gt     lt thead gt       lt tr gt  lt th gt Name lt  th gt  lt th gt Description lt  th gt  lt th gt Actions lt  th gt  lt  tr gt     lt  thead gt     lt tbody data-link  row  class  rowlink  gt       lt tr gt  lt td gt  lt a href   inputmask  gt Input mask lt  a gt  lt  td gt  lt td gt Input masks can be used to force the user to enter data conform a specific format  lt  td gt  lt td class  rowlink-skip  gt  lt a href     gt Action lt  a gt  lt  td gt  lt  tr gt       lt tr gt  lt td gt  lt a href  http   www jasny net   target   blank  gt jasny net lt  a gt  lt  td gt  lt td gt Shared knowledge of Arnold Daniels aka Jasny  lt  td gt  lt td class  rowlink-skip  gt  lt a href     gt Action lt  a gt  lt  td gt  lt  tr gt       lt tr gt  lt td gt  lt a href   rowlinkModal  data-toggle  modal  gt Launch modal lt  a gt  lt  td gt  lt td gt Toggle a modal via JavaScript by clicking this row  lt  td gt  lt td class  rowlink-skip  gt  lt a href     gt Action lt  a gt  lt  td gt  lt  tr gt     lt  tbody gt   lt  table gt    Usage  Via data attributes  Add class  rowlink and attribute data-link  row  to a  lt table gt  or  lt tbody gt  element  For other options append the name to data-  as in data-target  a mainlink  A cell can be excluded by adding the  rowlink-skip class to the  lt td gt    Via JavaScript  Call the input mask via javascript      tbody rowlink   rowlink

User · Answer

You can add the button role to a table row and Bootstrap will change the cursor without any css changes  I decided to use that role as a way to easily make any row clickable with very little code   Html   lt table class  table table-striped table-hover  gt        lt tbody gt             lt tr role  button  data-href     gt                  lt td gt Cell 1 lt  td gt                  lt td gt Cell 2 lt  td gt                  lt td gt Cell 3 lt  td gt             lt  tr gt        lt  tbody gt   lt  table gt    jQuery    function             table   on  click    tr role   button      function  e              window location     this  data  href                   You can apply this same principle to add the button role to any tag

User · Answer

A linked table row is possible  but not with the standard  lt table gt  elements  You can do it using the display  table style properties  Here and here are some fiddles to demonstrate    This code should do the trick    x000D   x000D   table   x000D    display  table  x000D    x000D   x000D   row   x000D    display  table-row  x000D    x000D   x000D   cell   x000D    display  table-cell  x000D    padding  10px  x000D    x000D   x000D   row hover   x000D    background-color   cccccc  x000D    x000D   x000D   cell hover   x000D    background-color   e5e5e5  x000D    x000D   lt link href  https   stackpath bootstrapcdn com twitter-bootstrap 2 3 2 css bootstrap-combined min css  rel  stylesheet  type  text css    gt  x000D   x000D   lt div role  grid  class  table  gt  x000D     lt div role  row  class  row  gt  x000D       lt div role  gridcell  class  cell  gt  x000D        1 1 x000D       lt  div gt  x000D       lt div role  gridcell  class  cell  gt  x000D        1 2 x000D       lt  div gt  x000D       lt div role  gridcell  class  cell  gt  x000D        1 3 x000D       lt  div gt  x000D     lt  div gt  x000D   x000D     lt a role  row  class  row  href     gt  x000D       lt div role  gridcell  class  cell  gt  x000D        2 1 x000D       lt  div gt  x000D       lt div role  gridcell  class  cell  gt  x000D        2 2 x000D       lt  div gt  x000D       lt div role  gridcell  class  cell  gt  x000D        2 3 x000D       lt  div gt  x000D     lt  a gt  x000D   lt  div gt  x000D   x000D   x000D    Note that ARIA roles are needed to ensure proper accessibility since the standard  lt table gt  elements are not used  You may need to add additional roles like role  columnheader  if applicable  Find out more at the guide here

User · Answer

Achieved using standard Bootstrap 4 3  as follows - no jQuery nor any extra css classes needed   The key is to use stretched-link on the text within the cell and defining  lt tr gt  as a containing block    x000D   x000D   lt link href  https   stackpath bootstrapcdn com bootstrap 4 3 1 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   lt table class  table table-hover  gt  x000D     lt tbody gt  x000D       lt tr style  transform  rotate 0    gt  x000D       lt th scope  row  gt  lt a href     class  stretched-link  gt 1 lt  a gt  lt  th gt  x000D         lt td gt Mark lt  td gt  x000D         lt td gt Otto lt  td gt  x000D         lt td gt  mdo lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt th scope  row  gt 2 lt  th gt  x000D         lt td gt Jacob lt  td gt  x000D         lt td gt Thornton lt  td gt  x000D         lt td gt  fat lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt th scope  row  gt 3 lt  th gt  x000D         lt td gt Larry lt  td gt  x000D         lt td gt the Bird lt  td gt  x000D         lt td gt  twitter lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D    You can define containing block in different ways for example setting transform to not none value  as in example above    For more information read here s the Bootstrap documentation for stretched-link

[html] how to make a whole row in a table clickable as a link?

Examples related to html

Examples related to html-table

Examples related to bootstrap-4