Make td containing normal text as wide as if it was bold

css, html, html-table

Solution

You could give a like-bold style using a `text-shadow` effect, e.g.

td:hover {
  text-shadow:  0 0 1px #999;  
}

so it won't affect the width of the text. Example code: http://codepen.io/anon/pen/cEqJK

Problem

I'm working on a html table. To increase the readability, I want the current row to be bold. I do that like that: `.displayTable tr:hover { color: #000000; font-weight: bold; }` But the table cells change their width and the whole table resizes when I hover rows with content filling the whole cell (because bolded text takes up more space). So how can I prevent this by making the cell as wide as if it was bold without acually making t bold?

Original source