Как мне вырастить ТАБЛИЦУ такой же высоты, как ее контейнер? (или, борясь с медлительностью IE JavaScript) - PullRequest
Новая
       14

Как мне вырастить ТАБЛИЦУ такой же высоты, как ее контейнер? (или, борясь с медлительностью IE JavaScript)

1 голос
/ 05 января 2010

У меня есть веб-страница, где у меня есть таблица, вложенная в тэг TD (не пытайтесь меня с этим связать, у меня есть веская причина для этого) Когда страница загружается, я хочу увеличить высоту вложенной таблицы до высоты содержащей ее TD-ячейки. В настоящее время я делаю это с кодом, подобным этому: 

$(document).ready(function()
{
    $('.TakeOffItemGroupTable').each(function()
    {
        $(this).height($(this).closest('td').height()); 
    });
}

Это работает, но если на странице много таблиц для изменения размера, IE8 может потребоваться ~ 20 секунд, чтобы сделать это (FF, конечно, занимает секунду или две). Это потому, что $(this).height($(this).closest('td').height()); занимает:

  • 1мс в Chrome
  • 18мс в Firefox
  • 330мс в IE8

Есть ли какой-нибудь другой способ, которым вложенная таблица всегда принимает высоту своего контейнера?

То, что я пробовал: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled</title>
</head>
<body>
  <table border="1" >
    <tr>
       <td width="100px">JKLSD FASJDFKLSA DFKLADFJL KASDJFKLSAD JFSAKLDF</td>
       <td style="height: 100%;">
           <table style="height:100%;" border="1">
            <tr>
              <td>
                    I should be 100% tall!
              </td>
            </tr>
           </table>
       </td>
    </tr>
  </table>
</body>
</html>

Это работает в Firefox, но не в IE.

Ответы [ 4 ]

5 голосов
/ 05 января 2010

Я думаю, с правильным HTML Doctype ваш 2-й пример будет работать и в IE без Javascript.

В FF и IE 6, 7 и 8 у меня работает следующее: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
  <table style="height: 100%" border="1" >
    <tr><td>
       <table style="height:100%" border="1">
        <tr>
          <td>
                I am 100% tall!
          </td>
        </tr>
       </table>
    </td></tr>
  </table>
</body>
</html>
1 голос
/ 06 января 2010

я знаю, что все любят jquery, но, может быть, более простые js помогут? 

      var t = document.getElementById("nestedTable");
      t.style.height = t.parentNode.offsetHeight.toString() + "px";

при необходимости измените границы / отступы / поля.

1 голос
/ 05 января 2010

Почему вы не можете просто указать в таблице 100% высоты в разметке HTML? Это должно просто работать без JavaScript. 

<td height="100%">
  <table height="100%">
  ...
  </table>
</td>
1 голос
/ 05 января 2010

Если вы дадите внешнему td высоту пикселя, оно должно работать. Я предполагаю, что в настоящее время td уже на 100% высоты контейнера.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...