Firefox中的表格单元格宽度问题

时间:2012-03-29 17:55:05

标签: jquery html-table

以下代码应该使显示器的正确60%变为红色。它适用于Chrome,但不适用于Firefox。在Firefox中,它使整个屏幕变红。任何人都可以帮我解决这个问题吗?

<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:我不能在'td'中使用'background-color:red';我需要在代码中将新的'div'附加到表格单元格中(因为这是更大设计的一部分)。

3 个答案:

答案 0 :(得分:1)

试试这个:

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

答案 1 :(得分:1)

在Firefox和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>");

答案 2 :(得分:1)

TD与位置相对不合作,所以DIV从主要父母那里得到它的位置。

也许只需将单元格的内容包装在DIV

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

演示:http://jsfiddle.net/DCCU9/