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

Question

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?

Answer 1

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

Answer 2

I'm not sure that there is an ideal HTML/CSS solution for this problem, so I used some JavaScript to solve it.

The result can be found in this fiddle.

HTML:

<table class="displayTable">
    <tr><td>Row 1, Col 1</td><td>Row 1, Col 2</td></tr>
    <tr><td>Row 2, Col 1</td><td>Row 2, Col 2</td></tr>
</table>

CSS:

.displayTable {
    border: 1px solid #000;
}

.displayTable td {
    border: 1px solid #000;
}

.displayTable tr:hover { color: #000000; font-weight: bold; }

JavaScript (using jQuery):

$(function() {
    var td = $(".displayTable tr td");

    td.css("font-weight", "bold");

    td.each( function () {
        var width = $(this).width(),
            height = $(this).height();
        $(this).css("width", width+"px");
        $(this).css("height", height+"px");
    });

    td.css("font-weight", "");
});

In my code, on page load the JavaScript essentially sets the font-weight to bold, checks to see what the width and height of the td elements are, and sets their width and height properties to those values, and then removes the font-weight property so that it goes back to whatever (if anything) the stylesheet sets for it. This should work.