Make td with normal text as wide as if it were in bold

Question

I am working on an html table. To increase readability, I want the current line to be bold. I do like this:

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

But the table cells change their width, and the whole table changes size when I find rows with content filling the whole cell (because bold text takes up more space). So, how can I prevent this by making the cell as wide as if it were bold without being overlaid in bold?

Answer 1

You can give a bold style with an effect text-shadow, for example.

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

. : http://codepen.io/anon/pen/cEqJK

Answer 2

, HTML/CSS, JavaScript.

.

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 ( 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", "");
});

JavaScript , , td, , font-weight, - ( -) . .

Answer 3

. width height <td>.

HTML

<table class="displayTable">
    <tr>
        <td>Hello</td>
        <td>Word</td>
    </tr>
    <tr>
        <td>Hello</td>
        <td>Word</td>
    </tr>
</table>

CSS

.displayTable tr:hover {
     color: #000000; 
    font-weight: bold;    
}
tr{ background:yellow; }
td{
     width:100px;
    height:50px;
    text-align:center;
}

Answer 4

Well, I tried to remember that your text, which will be filled in each td, will be long and short. Therefore, for this I use a separate one divto bind text and set them overflowat the heart of width and heightyourtd

div{
    width:100px;
    height:50px;
    overflow-y:scroll;

}
td{
    padding:5px;
}

tr:hover{

    font-weight:bolder;
    color:red;
}

here is a fiddle example