html - table row like a link

Question

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

User · Answer

Can you add an A tag to the row    lt tr gt  lt td gt   lt a href    link htm  gt  lt  a gt   lt  td gt  lt  tr gt    Is this what you re asking

User · Answer

This saves you having to duplicate the link in the tr - just fish it out of the first a         link-first-found   click function      var href  href     this  find  a   attr  href    if  href           return document location   href

User · Answer

You can t wrap a  lt td gt  element with an  lt a gt  tag  but you can accomplish similar functionality by using the onclick event to call a function  An example is found here  something like this function    lt script type  text javascript  gt  function DoNav url       document location href   url     lt  script gt    And add it to your table like this    lt tr onclick  DoNav  http   stackoverflow com     gt  lt td gt  lt  td gt  lt  tr gt

User · Answer

When i want simulate a  lt tr gt  with a link but respecting the html standards  I do this   HTML    lt table gt       lt tr class  trLink  gt           lt td gt               lt a href     gt Something lt  a gt           lt  td gt       lt  tr gt   lt  table gt    CSS   tr trLink       cursor  pointer    tr trLink hover        TR-HOVER-STYLES      tr trLink a      display  block      height  100       width  100     tr trLink hover a       LINK-HOVER-STYLES       In this way  when someone go with his mouse on a TR  all the row  and this links  gets the hover style and he can t see that there are multiple links   Hope can help someone     Fiddle HERE

User · Answer

I made myself a custom jquery function   Html   lt tr data-href  site com whatever  gt    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

User · Answer

Style    trlink       color blue         trlink hover       color red        lt tr class  trlink  onclick  function to navigate to a page goes here  gt   lt td gt linktext lt  td gt   lt  tr gt    Something along these lines perhaps   Though it does use JS  but that s only way to make a row  tr  clickable   Unless you have a single cell with an anchor tag that fills the entire cell   And then  you shouldn t be using a table anyhow

User · Answer

After reading this thread and some others I came up with the following solution in javascript   function trs makelinks trs        for  var i   0  i  lt  trs length    i            if  trs i  getAttribute  href      undefined                var tr   trs i               tr onclick   function      window location href   this getAttribute  href                   tr onkeydown   function  e                    var e   e    window event                  if   e keyCode     13      e keyCode     32                         e preventDefault   e preventDefault      e returnValue   false                       this click                                                 tr role    button               tr tabIndex   0              tr style cursor    pointer                         It could be adapted for other tags    trs makelinks document getElementsByTagName  tr     trs makelinks document getElementsByTagName  td     trs makelinks document getElementsByTagName  th       To use it put the href in tr td th that you desire to be clickable like   lt tr href  http   stackoverflow com  gt   And make sure the script above is executed after the tr element is created  by its placement or using event handlers    The downside is it won t totally make the TRs behave as links like with divs with display  table   and they won t be keyboard-selectable or have status text  Edit  I made keyboard navigation work by setting onkeydown  role and tabIndex  you could remove that part if only mouse is needed  They won t show the URL in statusbar on hovering though   You can style specifically the link TRs with  tr href   CSS selector

User · Answer

You have two ways to do this    Using javascript     lt tr onclick  document location    links html    gt  Using anchors    lt tr gt  lt td gt  lt a href    gt text lt  a gt  lt  td gt  lt td gt  lt a href    gt text lt  a gt  lt  td gt  lt  tr gt    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

User · Answer

The usual way is to assign some JavaScript to the onClick attribute of the TR element   If you can t use JavaScript  then you must use a trick    Add the same link to each TD of the same row  the link must be the outermost element in the cell   Turn links into block elements  a   display  block  width  100   height  100       The latter will force the link to fill the whole cell so clicking anywhere will invoke the link

User · Answer

I know this question is already answered but I still don t like any solution on this page  For the people who use JQuery I made a final solution which enables you to give the table row almost the same behaviour as the  lt a gt  tag    This is my solution   jQuery You can add this for example to a standard included javascript file     body   on  mousedown    tr url    function e       var click   e which      var url     this  attr  url        if url           if click    1               window location href   url                    else if click    2               window open url    blank                window focus                      return true              HTML Now you can use this on any  lt tr gt  element inside your HTML   lt tr url  example com  gt       lt td gt value lt  td gt       lt td gt value lt  td gt       lt td gt value lt  td gt   lt tr gt

User · Answer

Answer from sirwilliam fits me best  I improved the Javascript with support for hotkey Ctrl   LeftClick  opens page in new tab   Event ctrlKey is used by PC s  metaKey by Mac   Javascript     body   on  mousedown    tr url    function e       var click   e which      var url     this  attr  url        if url           if click    2     click    1  amp  amp   e ctrlKey    e metaKey                 window open url    blank                window focus                      else if click    1               window location href   url                    return true              Example  http   jsfiddle net vlastislavnovak oaqo2kgs

User · Answer

If you have to use a table  you can put a link into each table cell    lt table gt     lt tbody gt       lt tr gt         lt td gt  lt a href  person1 html  gt John Smith lt  a gt  lt  td gt         lt td gt  lt a href  person1 html  gt 123 Fake St lt  a gt  lt  td gt         lt td gt  lt a href  person1 html  gt 90210 lt  a gt  lt  td gt       lt  tr gt       lt tr gt         lt td gt  lt a href  person2 html  gt Peter Nguyen lt  a gt  lt  td gt         lt td gt  lt a href  person2 html  gt 456 Elm Ave lt  a gt  lt  td gt         lt td gt  lt a href  person2 html  gt 90210 lt  a gt  lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt    And make the links fill up the entire cells   table tbody tr td a     display  block    width  100     height  100       If you are able to use  lt div gt s instead of a table  your HTML can be a lot simpler  and you won t get  gaps  in the links  between the table cells    lt div class  myTable  gt     lt a href  person1 html  gt       lt span gt John Smith lt  span gt       lt span gt 123 Fake St lt  span gt       lt span gt 90210 lt  span gt     lt  a gt     lt a href  person2 html  gt       lt span gt Peter Nguyen lt  span gt       lt span gt 456 Elm Ave lt  span gt       lt span gt 90210 lt  span gt     lt  a gt   lt  div gt    Here is the CSS that goes with the  lt div gt  method    myTable     display  table     myTable a     display  table-row     myTable a span     display  table-cell    padding  2px     this line not really needed

User · Answer

If you re on a browser that supports it you can use CSS to transform the  lt a gt  into a table row    table-row   display  table-row     table-cell   display  table-cell      lt div style  display  table   gt       lt a href       class  table-row  gt           lt span class  table-cell  gt This is a TD    ish    lt  span gt       lt  a gt   lt  div gt    Of course  you re limited to not putting block elements inside the  lt a gt   You also can t mix this in with a regular  lt table gt

User · Answer

I have another way  Especially if you need to post data using jQuery    document  on  click     tablename tbody tr   function            var test  something         post  ajax setvariable php    ID  this id  TEST test   function data                   window location href    http   somepage                 Set variable sets up variables in SESSIONS which the page you are going to can read and act upon   I would really like a way of posting straight to a window location  but I do not think it is possible

User · Answer

Thanks for this  You can change the hover icon by assigning a CSS class to the  row like    lt tr class  pointer  onclick  document location    links html    gt    and the CSS looks like    lt style gt       pointer   cursor  pointer     lt  style gt

[html] html - table row like a link

Examples related to html

Examples related to css

Examples related to hyperlink

Examples related to html-table