Таблица внутри div, но все еще выше родительского div - PullRequest
Новая
       8

Таблица внутри div, но все еще выше родительского div

0 голосов
/ 31 августа 2009

Почему атрибут height = "100%" не работает в следующем фрагменте? 

<table height="100%" width="100%">

EDIT : код следующий: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<div style="width:250px;height:90px;">

<table id="experiences-mirror" width="100%" border="1" cellpadding="0" height="100%">
    <caption>Table Name</caption>
    <tbody><tr><th>Company</th><th>Job Title</th><th>Industry</th><th>Job Function</th><th>Start Date</th><th>End Date</th></tr>
    <tr title="hint">
        <td><input name="company1" class="w100" type="text"></td><td><input name="jobTitle1" class="w100" value="" type="text"></td><td><input name="industry1" class="w100" value="" type="text"></td><td><input name="jobFunction1" class="w100" type="text"></td><td><input name="startDate1" class="w100" type="text"></td><td><input name="endDate1" class="w100" type="text"></td>
    </tr>
    <tr title="hint">
        <td><input name="company2" class="w100" type="text"></td><td><input name="jobTitle2" class="w100" type="text"></td><td><input name="industry2" class="w100" type="text"></td><td><input name="jobFunction2" class="w100" type="text"></td><td><input name="startDate2" class="w100" type="text"></td><td><input name="endDate2" class="w100" type="text"></td>
    </tr>
    <tr title="hint">
        <td><input name="company3" class="w100" type="text"></td><td><input name="jobTitle3" class="w100" type="text"></td><td><input name="industry3" class="w100" type="text"></td><td><input name="jobFunction3" class="w100" type="text"></td><td><input name="startDate3" class="w100" type="text"></td><td><input name="endDate3" class="w100" type="text"></td>
    </tr>
    <tr title="hint">
        <td><input name="company4" class="w100" type="text"></td><td><input name="jobTitle4" class="w100" type="text"></td><td><input name="industry4" class="w100" type="text"></td><td><input name="jobFunction4" class="w100" type="text"></td><td><input name="startDate4" class="w100" type="text"></td><td><input name="endDate4" class="w100" type="text"></td>
    </tr>
</tbody></table>

</div>

Ответы [ 3 ]

1 голос
/ 31 августа 2009

Проблема в том, что расчетная высота вашего стола уже превышает 90 пикселей. Я увеличил его до 290 пикселей, и ваш код сработал.

Однако предпочтительным способом установки высоты является использование CSS, например: 

#experiences-mirror {
 width: 100%;
 height: 100%;
}
0 голосов
/ 31 августа 2009

Существует очень простая причина: элемент table не имеет атрибута height.

Если вы хотите установить высоту таблицы, вы должны использовать CSS: 

style="height:100%;"
0 голосов
/ 31 августа 2009

Может быть из-за table-layout Свойство CSS. Как правило, если таблица имеет автоматическое размещение, она масштабируется под содержимое независимо от того, что вы указали в теге <table>. Алгоритм рендеринга таблиц в лучшем случае запутан.

Лучше всего убедиться, что таблица имеет фиксированный формат, а затем убедитесь, что первый ряд элементов TD имеет фиксированную ширину. В противном случае вы столкнетесь со многими проблемами, в том числе со многими браузерами.

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

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

...