нежелательное пространство до и после вложенной HTML-таблицы с помощью Internet Explorer 8 - PullRequest
Новая
       13

нежелательное пространство до и после вложенной HTML-таблицы с помощью Internet Explorer 8

0 голосов
/ 24 апреля 2010

У меня есть HTML-таблица, вложенная в ячейку HTML-таблицы. Я хочу, чтобы вложенная таблица использовала полный размер ячейки, в которую она вложена. Когда я использую Firefox или Google Chrome, я получаю желаемый результат, но когда я использую Internet Explorer 8 (даже если я использую td style = "height =" 100% ") высота вложенной ячейки зависит от ее содержимого. В результате я получаю пробелы до и после вложенной таблицы. Вот простой HTML, который воспроизведет проблему. 

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
<!--
body, html, table{
    height: 100%;
    width: 100%;
    margin:0;
    padding:0;
}
table, td, th {border:#000 medium solid}
</style>
<body>
<table>
   <tr>
    <th style="margin:0;padding:0;height:100;">
    <table><tr><th style="height:100%">nested cell</th></tr></table>
    </th>
  </tr>
</table>
</body>
</html>

Ответы [ 5 ]

1 голос
/ 24 апреля 2010

Использование прикрепленного кода работало для меня как для IE, так и для FF, но пришлось удалить границы, так как они обрабатываются в IE и FF по-разному 

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
<!--
body, html, table{
    height: 100%;
    width: 100%;
    margin:0;
    padding:0;
}
table{border:#000 0px solid}
</style>
<body>
<table style="background:#063"  cellpadding="0" cellspacing="0" border="0">
   <tr>
    <th style="margin:0;padding:0;height:100%;">
    <table style="background:#0FF;" cellpadding="0" cellspacing="0" border="0"><tr><th style="height:100%">nested cell</th></tr></table>
    </th>
  </tr>
</table>
</body>
</html>
1 голос
/ 24 апреля 2010

Вот ваша проблема, вы указали <th style="margin:0;padding:0;height:100;"> во встроенном стиле CSS для вас th внутри вашего основного table.

Это должно решить вашу проблему, попробуйте использовать height:100%;.

РЕДАКТИРОВАТЬ:

Чтобы избавиться от дополнительного пространства, которое требуется в IE8 для прокрутки вниз по странице, вы можете удалить свою рамку и добавить cellpadding="0" cellspacing="0" к основной таблице. 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
body, html, table{
    height: 100%;
    width: 100%;
    margin:0px;
    padding:0px;
}
</style>
<body>
<table cellpadding="0" cellspacing="0">
   <tr>
    <th style="margin:0px;padding:0px;height:100%;">
    <table><tr><th>nested cell</th></tr></table>
    </th>
  </tr>
</table>
</body>
</html>
0 голосов
/ 24 апреля 2010 
<th style="margin:0;padding:0;height:100%;">

вместо 

<th style="margin:0;padding:0;height:100;">
0 голосов
/ 24 апреля 2010

попробуйте просто добавить th{height:100%} к вашему стилю CSS

0 голосов
/ 24 апреля 2010

В вашем <th> есть «высота: 100;» вместо "высота: 100%"; - отсутствует "%"

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

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

...