Link entire table row

Question

I know it is possible to link an entire table cell with CSS    tableClass td a     display  block      Is there a way to apply a link to an entire table row

User · Answer

Use the   before pseudo element  This way only you don t have to deal with Javascript or creating links for each cell  Using the following table structure   lt table gt     lt tr gt       lt td gt  lt a href  http   domain tld  class  rowlink  gt Cell lt  a gt  lt  td gt       lt td gt Cell lt  td gt       lt td gt Cell lt  td gt     lt  tr gt   lt  table gt    all we have to do is create a block element spanning the entire width of the table using   before on the desired link   rowlink  in this case   table     position  relative      rowlink  before     content        display  block    position  absolute    left  0    width  100     height  1 5em     don t forget to set the height         demo  The   before is highlighted in red in the demo so you can see what it s doing

User · Answer

Also it depends if you need to use a table element or not  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

I agree with Matti  Would be easy to do with some simple javascript  A quick jquery example would be something like this    lt tr gt     lt td gt  lt a href  http   www example com   gt example lt  a gt  lt  td gt     lt td gt another cell lt  td gt     lt td gt one more lt  td gt   lt  tr gt    and      tr   click  function         window location     this  find  a   attr  href       hover  function           this  toggleClass  hover          then in your CSS  tr hover      cursor  pointer        whatever other hover styles you want

User · Answer

Unfortunately  no  Not with HTML and CSS  You need an a element to make a link  and you can t wrap an entire table row in one   The closest you can get is linking every table cell  Personally I d just link one cell and use JavaScript to make the rest clickable  It s good to have at least one cell that really looks like a link  underlined and all  for clarity anyways   Here s a simple jQuery snippet to make all table rows with links clickable  it looks for the first link and  clicks  it      table   on  click    tr   function e        if    e target  is  a input       anything else you don t want to trigger the click         return       location href     this  find  a   attr  href

User · Answer

Example  http   xxjjnn com linktablerow html  Link entire row    lt table gt     lt tr onclick  location href  SomeWherrrreOverTheWebsiiiite html   gt         lt td gt     content     lt  td gt       lt td gt     content     lt  td gt             lt  tr gt   lt  table gt    Iff you d like to do highlight on mouseover for the entire row  then    lt table class  nogap  gt     lt tr class  lovelyrow  onclick  location href  SomeWherrrreOverTheWebsiiiite html   gt                lt  tr gt   lt  table gt    with something like the following for css  which will remove the gap between the table cells and change the background on hover   tr lovelyrow    background-color  hsl 0 0  90       tr lovelyrow hover    background-color  hsl 0 0  40      cursor  pointer     table nogap    border-collapse  collapse      Iff you are using Rails 3 0 9 then you might find this example code useful   Sea has many Fish  Fish has many Scales  here is snippet of app view fish index erb   lt table gt   lt    fishies each do  fish    gt     lt tr onclick  location href   lt    sea fish scales path  sea  fish    gt    gt        lt td gt  lt    fish title   gt  lt  td gt     lt  tr gt   lt   end   gt   lt  table gt    with  fishies and  sea are defined in app controllers seas controller rb

User · Answer

To link the entire row  you need to define onclick function on your row  which is  lt tr gt element and define a mouse hover in the CSS for tr element to make the mouse pointer to a typical click-hand in web   In table    lt tr onclick  location href  http   www google com   gt   lt td gt blah lt  td gt   lt td gt blah lt  td gt   lt td gt  lt strong gt Text lt  strong gt  lt  td gt   lt  tr gt    In related CSS   tr hover   cursor  pointer

User · Answer

I think this might be the simplest solution    lt tr onclick  location href  http   www mywebsite com   style  cursor  pointer  gt   lt td gt     lt  td gt   lt td gt     lt  td gt   lt  tr gt       The cursor CSS property sets the type of cursor  if any  to show when   the mouse pointer is over an element    The inline css defines that for that element the cursor will be formatted as a pointer  so you don t need the  hover

User · Answer

I feel like the simplest solution is sans javascript and simply putting the link in each cell  provided you don t have massive gullies between your cells or really think border lines   Have your css    tableClass td a     display  block      and then add a link per cell    lt table class  tableClass  gt       lt tr gt           lt td gt  lt a href   link  gt Link name lt  a gt  lt  td gt           lt td gt  lt a href   link  gt Link description lt  a gt  lt  td gt           lt td gt  lt a href   link  gt Link somthing else lt  a gt  lt  td gt       lt  tr gt   lt  table gt    boring but clean

[html] Link entire table row?

Examples related to html

Examples related to css