{"id":68,"date":"2019-04-13T15:13:36","date_gmt":"2019-04-13T15:13:36","guid":{"rendered":"http:\/\/www.januszcimek.com\/blog\/?p=68"},"modified":"2021-01-17T19:43:13","modified_gmt":"2021-01-17T19:43:13","slug":"highlighting-html-table-row-on-hover-by-making-it-wider-than-the-table-itself","status":"publish","type":"post","link":"https:\/\/www.januszcimek.com\/blog\/2019\/04\/13\/highlighting-html-table-row-on-hover-by-making-it-wider-than-the-table-itself\/","title":{"rendered":"Highlighting HTML table row on hover by making it wider than the table itself"},"content":{"rendered":"\n<p>Tables are great for displaying structured data. They might have been used for odd tasks as positioning images or even making websites grids but these days HTML tables are used mostly for its original purpose. One of the things we can do if we want our records displayed in this format more fun to play around with is to add some row highlight effect. There are variety of effects that we could apply but I think one of the most useful from the UX perspective is to emphasize the data that we currently hover over. <\/p>\n\n\n\n<h2>Simple table row emphasis<br><\/h2>\n\n\n\n<p>So let&#8217;s start with basic table and some styling:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;body>\n  &lt;table>\n    &lt;tbody>\n  &lt;tr>\n    &lt;td>John&lt;\/td>\n    &lt;td>Bar&lt;\/td>\n    &lt;td>34&lt;\/td>\n    &lt;td>programmer&lt;\/td>\n  &lt;\/tr>\n  &lt;tr>\n    &lt;td>Ann&lt;\/td>\n    &lt;td>Foo&lt;\/td>\n    &lt;td>28&lt;\/td>\n    &lt;td>teacher&lt;\/td>\n  &lt;\/tr>\n  &lt;tr>\n    &lt;td>John&lt;\/td>\n    &lt;td>Bar&lt;\/td>\n    &lt;td>34&lt;\/td>\n    &lt;td>programmer&lt;\/td>\n  &lt;\/tr>\n        &lt;tr>\n    &lt;td>Ann&lt;\/td>\n    &lt;td>Foo&lt;\/td>\n    &lt;td>28&lt;\/td>\n    &lt;td>teacher&lt;\/td>\n  &lt;\/tr>\n  &lt;\/tbody>\n    &lt;\/table>\n&lt;\/body><\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">body {\n  width:100vw;\n  background-color:grey;\n}\ntable {\n  width:70%;\n  margin:100px auto;\n  background-color: white;\n  border-collapse: collapse; \n}\ntd {\n  text-align:center;\n  padding: 20px;\n}\ntr {\n  border: 1px solid transparent;\n}\ntr:hover td{\n  cursor:pointer;\n  color:red;\n  border-top: 1px solid grey;\n  border-bottom: 1px solid grey;\n}\n\ntr:first-child:hover td {\n  border-top: none;\n}\ntr:last-child:hover td {\n  border-bottom: none;\n}<\/pre>\n\n\n\n<p>It is very basic indeed. So we have a hover effect on a row when we add borders in hovered row and change its text color.  Some transparent borders and special styling for the first and last row have been used to prevent annoying 1px layout jumps on row change. <\/p>\n\n\n\n<p class=\"codepen\" data-height=\"440\" data-theme-id=\"0\" data-default-tab=\"css,result\" data-user=\"codeVerses\" data-slug-hash=\"VNzQWB\" style=\"height: 440px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;\" data-pen-title=\"Table row highlight\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/codeVerses\/pen\/VNzQWB\/\">\n  Table row highlight<\/a> by codeVerses (<a href=\"https:\/\/codepen.io\/codeVerses\">@codeVerses<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<p>To make it look better we could add some extra styling of course, but what about making the selected row stand out by slightly extending it beyond the table width? Well it is not that straight forward. We cannot use width manipulation as the table would not render anything outside of its body. The other option would be to use the scaleX transformation. This would allow us to beat the table borders but it has very bad downside to it. Scaling would make all the row children scale too, including their inner text causing nasty blur to the contents. So we would have to be more creative than that. <br><\/p>\n\n\n\n<h2>Using empty table cells and scale to achieve desired effect<\/h2>\n\n\n\n<p>We need to add additional empty cells and put divs in there that we will scale on row hover so the text contents are not affected. This would be our row in html:<br><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;tr>\n    &lt;td class=\"highlight\">&lt;div>&lt;\/div>&lt;\/td>\n    &lt;td>Ann&lt;\/td>\n    &lt;td>Foo&lt;\/td>\n    &lt;td>28&lt;\/td>\n    &lt;td>teacher&lt;\/td>\n    &lt;td class=\"highlight\">&lt;div>&lt;\/div>&lt;\/td>\n  &lt;\/tr><\/pre>\n\n\n\n<p>And our new css covers the scaling and additional stuff like smoother transition, border radius and adding some box shadow to make it look better.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">td.highlight {\n  padding:0;\n  width:4px;\n}\ntd.highlight div {\n  width:4px;\n  height:60px;\n  border-radius:4px;\n  background-color: white;\n  transition: all 0.2s ease-in-out;\n}\ntr:hover {\n box-shadow: 0px 9px 4px -6px grey;\n}\ntr:hover td.highlight div {\n  transform: scaleX(3);\n}<\/pre>\n\n\n\n<p>Wow, we finally broke through the table width frontier and our row is expanding nicely beyond the table body. Here is the complete example:<br><\/p>\n\n\n\n<p class=\"codepen\" data-height=\"457\" data-theme-id=\"0\" data-default-tab=\"css,result\" data-user=\"codeVerses\" data-slug-hash=\"bJrLoG\" style=\"height: 457px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;\" data-pen-title=\"Table row highlight make row wider than table\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/codeVerses\/pen\/bJrLoG\/\">\n  Table row highlight make row wider than table<\/a> by codeVerses (<a href=\"https:\/\/codepen.io\/codeVerses\">@codeVerses<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n","protected":false},"excerpt":{"rendered":"<p>Tables are great for displaying structured data. They might have been used for odd tasks as positioning images or even making websites grids but these days HTML tables are used mostly for its original purpose. One of the things we can do if we want our records displayed in this format more fun to play [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":78,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v15.6.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Highlighting HTML table row on hover by making it wider than the table itself - The Code Verses<\/title>\n<meta name=\"description\" content=\"Find out how to create a highlight effect on selected html table row extending it beyond it&#039;s parent element using little bit of css magic.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.januszcimek.com\/blog\/2019\/04\/13\/highlighting-html-table-row-on-hover-by-making-it-wider-than-the-table-itself\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Highlighting HTML table row on hover by making it wider than the table itself - The Code Verses\" \/>\n<meta property=\"og:description\" content=\"Find out how to create a highlight effect on selected html table row extending it beyond it&#039;s parent element using little bit of css magic.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.januszcimek.com\/blog\/2019\/04\/13\/highlighting-html-table-row-on-hover-by-making-it-wider-than-the-table-itself\/\" \/>\n<meta property=\"og:site_name\" content=\"The Code Verses\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-13T15:13:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-17T19:43:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.januszcimek.com\/blog\/wp-content\/uploads\/2019\/04\/table-highlight-row.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"519\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"3 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.januszcimek.com\/blog\/#website\",\"url\":\"https:\/\/www.januszcimek.com\/blog\/\",\"name\":\"The Code Verses\",\"description\":\"Just another front end blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.januszcimek.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.januszcimek.com\/blog\/2019\/04\/13\/highlighting-html-table-row-on-hover-by-making-it-wider-than-the-table-itself\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.januszcimek.com\/blog\/wp-content\/uploads\/2019\/04\/table-highlight-row.png\",\"width\":1024,\"height\":519},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.januszcimek.com\/blog\/2019\/04\/13\/highlighting-html-table-row-on-hover-by-making-it-wider-than-the-table-itself\/#webpage\",\"url\":\"https:\/\/www.januszcimek.com\/blog\/2019\/04\/13\/highlighting-html-table-row-on-hover-by-making-it-wider-than-the-table-itself\/\",\"name\":\"Highlighting HTML table row on hover by making it wider than the table itself - The Code Verses\",\"isPartOf\":{\"@id\":\"https:\/\/www.januszcimek.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.januszcimek.com\/blog\/2019\/04\/13\/highlighting-html-table-row-on-hover-by-making-it-wider-than-the-table-itself\/#primaryimage\"},\"datePublished\":\"2019-04-13T15:13:36+00:00\",\"dateModified\":\"2021-01-17T19:43:13+00:00\",\"author\":{\"@id\":\"https:\/\/www.januszcimek.com\/blog\/#\/schema\/person\/80e429555c65a9c976839288342ae906\"},\"description\":\"Find out how to create a highlight effect on selected html table row extending it beyond it's parent element using little bit of css magic.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.januszcimek.com\/blog\/2019\/04\/13\/highlighting-html-table-row-on-hover-by-making-it-wider-than-the-table-itself\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.januszcimek.com\/blog\/#\/schema\/person\/80e429555c65a9c976839288342ae906\",\"name\":\"Janusz Cimek\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.januszcimek.com\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/78902c04acb4f0fc7634ec30637984c1?s=96&d=mm&r=g\",\"caption\":\"Janusz Cimek\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.januszcimek.com\/blog\/wp-json\/wp\/v2\/posts\/68"}],"collection":[{"href":"https:\/\/www.januszcimek.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.januszcimek.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.januszcimek.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.januszcimek.com\/blog\/wp-json\/wp\/v2\/comments?post=68"}],"version-history":[{"count":10,"href":"https:\/\/www.januszcimek.com\/blog\/wp-json\/wp\/v2\/posts\/68\/revisions"}],"predecessor-version":[{"id":85,"href":"https:\/\/www.januszcimek.com\/blog\/wp-json\/wp\/v2\/posts\/68\/revisions\/85"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.januszcimek.com\/blog\/wp-json\/wp\/v2\/media\/78"}],"wp:attachment":[{"href":"https:\/\/www.januszcimek.com\/blog\/wp-json\/wp\/v2\/media?parent=68"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.januszcimek.com\/blog\/wp-json\/wp\/v2\/categories?post=68"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.januszcimek.com\/blog\/wp-json\/wp\/v2\/tags?post=68"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}