使包含普通文本的td与粗体一样宽

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, eg

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.

Answer 3

Make your table size static. Add width and height to <td> .

Fiddle Demo

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 put in mind that your text that will be populated in each td would be long and short. So for that i use a separate div to bind the text and set their overflow with the basis of the width and height of your td

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

}
td{
    padding:5px;
}

tr:hover{

    font-weight:bolder;
    color:red;
}

here is a sample fiddle