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

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?

Answers


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


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.


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;
}

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


Need Your Help

Use Glyphicons or Font-Awesome in pdfmake prints

javascript font-awesome glyphicons pdfmake

I am developing a webapp using pdfmake for the printing.

Can't get sprite to move in a circle path

javascript animation canvas path geometry

I have this sprite called snitch and I'm trying to make it move in a circle, with the center in the canvas/2 (canvas is named space) and radius 30. I'm using the following code but it doesn't seem ...