CODEWITHSUNDEEP
jqueryhtml-table
Bahar S
Bahar S

Reputation: 429

Table Cell width issue in Firefox

The following code is supposed to make the right 60% of the display red. It does in Chrome, but does not in Firefox. In Firefox, it makes the whole screen red. Can anybody help me fix this?

<table border="0" width="100%">
    <tr>
    <td id="l" width="30%" height="200px"></td>
    <td id="m" width="3%"  style="background-color:green"></td>
    <td id="r" width="60%" height="200px"></td>
    </tr>
</table>    
<script>
        w = $('#r').width();
        h = $(window).height();

        $("#r").css({'width' : w, 'height' : h, 'position': 'relative', 'top': '0px', 'left': '0px'});
        $("#r").append("<div style='width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background-color:red;'></div>");

</script>

ps: I cannot use 'background-color:red' in 'td'; I need to append the new 'div' to the table cell as you can in the code (since this is a part of a bigger design).

Upvotes: 0

Views: 641

Answers (3)

charlietfl
charlietfl

Reputation: 171679

TD's don't work well with position relative so the DIV is getting it's position from main parent.

Perhaps this will work better for you just wrapping the contents of the cell in a DIV

  $("#r").wrapInner("<div style='width: 100%; height: 100%; background-color:red;'></div>");

Demo: http://jsfiddle.net/DCCU9/

Upvotes: 1

cameronbriar
cameronbriar

Reputation: 11

Changing the position from absolute to relative worked for me in Firefox and Chrome.

<table border="0" width="100%">
    <tr>
    <td id="l" width="30%" height="200px"></td>
    <td id="m" width="3%"  style="background-color:green"></td>
    <td id="r" width="60%" height="200px"></td>
    </tr>

</table>    
<script>
        w = $('#r').width();
        h = $(window).height();

        $("#r").css({'width' : w, 'height' : h, 'position': 'relative', 'top': '0px', 'left': '0px'});
        $("#r").append("<div style='width: 100%; height: 100%; position: relative; top: 0px; left: 0px; background-color:red;'></div>");

Upvotes: 1

AliRıza Adıyahşi
AliRıza Adıyahşi

Reputation: 15866

try this: 

<table border="0" width="100%">
        <tr>
            <td id="l" width="30%" height="200px">

            </td>
            <td id="m" width="3%" style="background-color: green;">

            </td>
            <td id="r" width="60%" height="200px" style="vertical-align:top;">

            </td>
        </tr>
    </table>
    <script>

        w = $('#r').width();
        h = $(window).height();

        $("#r").css({ 'width': w, 'height': h, 'position': 'relative' });
        $("#r").append("<div style='width: 100%; height: 100%; position: absolute; background-color:red;'></div>");

    </script>

Upvotes: 1

Related Questions