CODEWITHSUNDEEP
htmlcsshtml-table
jalgames
jalgames

Reputation: 789

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?

Upvotes: 4

Views: 2264

Answers (4)

Kyle
Kyle

Reputation: 2872

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.

Upvotes: 1

rockStar
rockStar

Reputation: 1296

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

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

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

Upvotes: 8

Adrian Enriquez
Adrian Enriquez

Reputation: 8413

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

Upvotes: 0

Related Questions