Высота строки HTML-кода в Firefox - PullRequest
Новая
       2

Высота строки HTML-кода в Firefox

0 голосов
/ 07 июля 2010

Есть ли способ, которым Firefox поддерживает высоту строки, поэтому, если данные не заполняют всю высоту тела, он сохраняет пустое пространство ниже последней строки?IE ведет себя таким образом, поэтому все строки остаются наверху.

Я хочу закодировать таблицу прокрутки с фиксированным заголовком;иногда для заполнения таблицы фиксированной высоты недостаточно данных о содержимом таблицы.

Пример кода: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="reset.css"/>
<style type="text/css">
    *    {margin:0}
    table {
        border: solid #66CC99;
        border-width: 0px 1px 1px 0px;
        width: 400px;
    }
    th, td {
        border: solid #66CC99;
        border-width: 1px 0px 0px 1px;
        padding: 4px;
    }
    th {
        background-color: #339999;
        color: #FFFFFF;
    }
    tr.alt td {
        background-color: #EEEEEE;
    }
    tbody {
        height: 200px;
        overflow-y: auto;
        overflow-x: hidden;
    }
</style>
<!--[if IE]>
    <style type="text/css">
        div {
            position: relative;
            height: 200px;
            width: 416px;
            overflow-y: scroll;
            overflow-x: hidden;
            border: solid #66CC99;
            border-width: 0px 0px 1px 0px;
        }
        table {
            border-width: 1px 1px 0px 0px;
        }
        thead tr {
            position: absolute;
            top: expression(this.offsetParent.scrollTop);
        }
        tbody {
            height: auto;
        }
        table tbody tr:first-child td {
            padding: 29px 4px 4px 4px;
        }
    </style>
<![endif]-->










    </head><body>

        <table class="treeTable" id="table" cellpadding="0" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th id="col1" class="text" style="width: 100%;" nowrap="nowrap">NAME</th>
                    <th class="selectable" style="width: 14em;" id="th-122002" nowrap="nowrap">12/2002</th>
                    <th class="selectable" style="width: 14em;" id="th-122007" nowrap="nowrap">12/2007</th>
                    <th class="selectable" style="width: 14em;" id="th-072010" nowrap="nowrap">07/2010</th>
                </tr>
            </thead>
            <tbody id="tbody">
                <tr>
                    <td>
                        Name
                    </td>
                    <td>
                        123
                    </td>
                    <td>
                        123
                    </td>
                    <td>
                        123
                    </td>
                </tr>
                <tr>
                    <td>
                        Name
                    </td>
                    <td>
                        123
                    </td>
                    <td>
                        123
                    </td>
                    <td>
                        123
                    </td>
                </tr>
            </tbody>
        </table>

</body></html>

Ответы [ 4 ]

1 голос
/ 07 июля 2010

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

<tr style="height: 100%;"></tr>

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

0 голосов
/ 07 июля 2010

Можете ли вы вставить свой код? Я также рекомендую использовать файл reset.css, чтобы убрать любые предрассудки, которые разные браузеры интерпретируют ваш код.

0 голосов
/ 07 июля 2010

Вы можете установить '& nbsp' в качестве данных, если значение отсутствует или вы можете сделать это, установив атрибут style для вашего тега 'td' как

0 голосов
/ 07 июля 2010

Вы указали атрибут height, установите его на нужное значение и затем посмотрите.

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

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

...