Как я могу исправить высоту строки таблицы в таблице 100% высоты с DOCTYPE, указанным с помощью CSS? - PullRequest
Новая
       8

Как я могу исправить высоту строки таблицы в таблице 100% высоты с DOCTYPE, указанным с помощью CSS?

2 голосов
/ 02 февраля 2009

Это дополнительный вопрос к вопросу Могу ли я создать ширину таблицы HTML в процентах по высоте, но высоту строки с точностью до пикселя? .

У меня есть таблица на HTML-странице, которая будет использоваться для табличных данных (поэтому я не хочу, чтобы ответ основывался на div). Это должно быть выполнено на высоте 100%, причем верхний ряд имеет фиксированный размер, а второй ряд растягивается, чтобы соответствовать остальной части доступной области.

Я использовал следующий код: 

<html>
  <body>
    <table style="border-collapse:collapse;height:100%;width:100%;">
      <tr>
        <td style="border:solid 1px black;height:100px">1</td>
        <td style="border:solid 1px black">2</td>
      </tr>
      <tr>
        <td style="border:solid 1px black">3</td>
        <td style="border:solid 1px black">4</td>
      </tr>
    </table>
  </body>
</html>

Это работает так, как мне нужно.

Проблема в том, что когда я помещаю это на страницу ASP.NET, созданную в Visual Studio, он добавляет элемент DOCTYPE. После добавления DOCTYPE (и установки CSS для тегов html и body, чтобы они включали высоту: 100%), верхняя строка таблицы намного больше нижней строки, и ни одна строка не имеет фиксированной высоты.

Я знаю, что должен использовать DOCTYPE, а не полагаться на «режим причуд» в Internet Explorer для обеспечения будущей совместимости. Тем не менее, я попробовал все DOCTYPE, которые я могу найти, чтобы попытаться изменить это поведение на то, что мне нужно, но не могу заставить его работать. Это работает в Firefox, но работа для Интранета, где пользователи используют IE7.

Если вы хотите увидеть проблему, попробуйте следующее: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="height:100%">
  <body style="height:100%">
    <table style="border-collapse:collapse;height:100%;width:100%;">
      <tr>
        <td style="border:solid 1px black;height:100px">1</td>
        <td style="border:solid 1px black">2</td>
      </tr>
      <tr>
        <td style="border:solid 1px black">3</td>
        <td style="border:solid 1px black">4</td>
      </tr>
    </table>
  </body>
</html>

Кто-нибудь знает ответ?

Ответы [ 4 ]

2 голосов
/ 03 февраля 2009

Существует простой способ исправить это, особенно если страница просто содержит эту таблицу, и вы просто хотите, чтобы она работала. Я не уверен, если ASP.NET позволит вам, хотя: Добавить комментарий перед типом документа. Э.Г. 

<!-- Here for IE6/7 -->
<!DOCTYPE html (etc.)>
... The HTML that works in quirks mode ...

Это заставит IE6 и IE7 запускать режим quirks , означая, что те более ранние ответы действительно будут работать. Но это вполне допустимое использование DOCTYPE и вызовет режим standard во всех других браузерах. IE8 (RC1 в любом случае) также использует режим причуд для этого, хотя он также правильно отображает в стандартном режиме.

Конечно, сохранение IE6 и 7 в режиме quirks означает, что они будут в режиме quirks для всех остальных вещей, поэтому, если вы собираетесь использовать множество других CSS, вы можете пожалеть об этом.

0 голосов
/ 03 февраля 2009

сначала я бы порекомендовал установить высоту на уровне строк, а не на уровне ячеек. И, во-вторых, если вы установите высоту второй строки равной 100%, IE заполнит оставшуюся часть пространства в таблице. Должно работать следующее: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="height:100%">
  <body style="height:100%">
    <table style="border-collapse:collapse;height:100%;width:100%; table-layout:fixed;">
      <tr style="height: 100px;">
        <td style="border:solid 1px black">1</td>
        <td style="border:solid 1px black">2</td>
      </tr>
      <tr style="height: 100%">
        <td style="border:solid 1px black">3</td>
        <td style="border:solid 1px black">4</td>
      </tr>
    </table>
  </body>
</html>

Использование высот, основанных на процентах, возможно, не лучший выбор, но без знания и понимания того, что вы пытаетесь достичь, это лучший совет, который я могу вам дать

0 голосов
/ 03 февраля 2009

Что ж, решение , которое я опубликовал для вашей проблемы, у которого (необходимый) div был обернут вокруг вашей таблицы, прекрасно работает с этим DOCTYPE и парой других, которые я пробовал, поэтому я не уверен проблема.

Вы просто предпочитаете игнорировать это, потому что в нем есть div? Или ты не читал или не пробовал? В чем проблема с divs?

0 голосов
/ 02 февраля 2009

Я стараюсь использовать% как можно меньше, потому что отступы, границы и поля добавляются к ширине 100%, если таковые имеются, если только вы не используете браузеры из каменного века. Я использую только мозаику фонового изображения, чтобы имитировать все Я хочу, чтобы у родительского элемента или тела было 100% высоты.

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

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

...