Проблема с шириной ячейки таблицы в Firefox

Следующий код должен сделать правый 60% экрана красного цвета. Он работает в Chrome, но не в Firefox. В 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: Я не могу использовать 'background-color: red' in 'td'; Мне нужно добавить новый «div» в ячейку таблицы, как вы можете в коде (поскольку это часть более крупного дизайна). спасибо.

источник

2012-03-29 Bahar S

попробовать это:

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

источник

2012-03-29 18:09:55

он теперь работает, спасибо. –

Я просто понял, что это решение просто передает красный прямоугольник. Ширина красной области не является шириной экрана * 60% (это то, что нам нужно); вместо этого ширина - ширина экрана. Вам нужно прокрутить вправо, чтобы увидеть весь прямоугольник. Эта проблема по-прежнему связана с Firefox. Есть идеи? Благодарю. –

$ ("# r"). Append ("

"); –

Изменение положения с абсолютного на относительный работал для меня в 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>");

источник

2012-03-29 18:17:41 cameronbriar

Это не сработало для меня. Спасибо BTW :) –

TD не работает должным образом с положением, поэтому DIV получает его положение от основного родителя.

Возможно, это будет работать лучше для вас, просто обернув содержимое ячейки в DIV

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

Демо: http://jsfiddle.net/DCCU9/

источник

2012-03-29 18:21:02 charlietfl

Это не сработало в моем проекте. Спасибо BTW :) –

Проблема с шириной ячейки таблицы в Firefox

ответ

Смежные вопросы