Jump to content

Mouse over table columns

Recommended Posts

So, i have this table of three rows and three columns. I want that when i mouse over a cell, the entire row and column of that cell gets highlighted. And of course, i want a pure CSS solution. For the rows, it is easy because i can just implement the ":hover" selector over the <tr> tag. However, i can't implement over the ":hover" selector onto <colgroup> or <col> tags. That is becauase, all browsers implement such tag with no height nor width. Even if i try to add a width and height, the browser debugger will immediately show that such values will be reset to zero.

<!DOCTYPE html><html><head>	<title></title><style type="text/css">  table {   border: 1px solid black;   border-collapse: separate;  }  col:nth-child(2n+1) {   width: 40px;   background-color: violet;  }  col:hover {   /*Doesn't work*/   background-color: aqua;  }  td {   border: 1px solid black;   text-align: center;   width: 20px;   height: 20px;  }  td:hover {   background-color :red;   /*Doesn't work*/   top: 0px;   left: auto;   height: 300%;   /*position: fixed; /*breaks it completely*/  }  tr {   border: 1px solid black;  }  tr:hover {   background-color: yellow;  }</style></head><body><table>  <colgroup>   <col />   <col />   <col />   <col />   <col />   <col />   <col />  </colgroup>  <tr>   <td>1</td>   <td>2</td>   <td>3</td>  </tr>  <tr>   <td>1</td>   <td>2</td>   <td>3</td>  </tr>  <tr>   <td>1</td>   <td>2</td>   <td>3</td>  </tr></table></body></html>

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...