Question

If there an easy way to fix the width of the html table columns at the time the page is rendered. I DO NOT want to specify the pixel or percent width of the columns in my code. However, once the page is created and the widths determined based on the initial content in the table I do not want the widths to change, even if the size of the cell content changes.

Just so you understand what i’m trying to do, if I have the content of a cell change(from normal to bold for example), say when I hover over the row, the size of the columns will change. This looks quite odd.

Answer 1

To be honest I didn’t understand the answer you gave to my comment, but I’ll attempt at an answer anyway 🙂

What you maybe need is to wrap the content of each cell in a div (or some other block element) and set it’s width. That should limit the widening of the cells, however as I hinted at im my comment, the wider content will overflow, which most like look ugly. However you didn’t really specify what you want the wider content to do…

<style type="text/css">
    #the-table td .wrap {
       overflow: hidden; /* try different values for different effects */
    }
</style>

<script type="text/javascript">
    $(function(){
        $('#the-table th, #the-table td').wrapInner(function() {
           return $("<div/>").css("width", $(this).width() + "px");
        });
    });
</script>

Live example: http://jsfiddle.net/Vx5Zq/

Notice how the letter F is cut off on hover.