Постоянный заголовок - проблема css - PullRequest
Новая
       6

Постоянный заголовок - проблема css

2 голосов
/ 23 января 2009

У меня есть AJAX-приложение, которое использует CSS-элементы для создания панелей на экране, которые загружаются отдельно и последовательно, в зависимости от того, что было загружено до него. Нижняя «панель» представляет собой таблицу со списком или записями из базы данных. В верхней части базы данных находится имя таблицы, и я хотел бы, чтобы она всегда была над списком записей. Я не уверен, как это сделать, если это с Javascript, или PHP, или CSS и HTML.

edit: я попытался обернуть заголовок таблицы в div и установить для этого css, но заголовок таблицы, похоже, не находится в своем собственном заголовке и не остается на экране отдельно от записей. 

.tableheader {
    position: absolute;
}

и 

$table = 'AUCTIONS';

$rows = getRowsByArticleSearch($query, $table);

echo '<div id="tableheader" class="tableheader">';

echo "<h1>{$query} Auctions</h1>" . "\n"; 
echo "</div>";

Я что-то упустил здесь?

Ответы [ 3 ]

2 голосов
/ 23 января 2009

Полагаю, вы хотите прокрутить таблицу, не перемещая заголовок?

Я думаю, что ваш самый простой вариант - это свойство CSS overflow . 

<style type="text/css">
  div#dblist {
    overflow: scroll;
    height: 400px;
  }
</style>

<!-- ... -->

<div>Database Title</div>
<div id="dblist">
  <table>
    <!-- ... -->
  </table>
</div>

@ Joshxtothe4: Похоже, что у вас прокрутка установлена ​​на неправильный элемент: 

<div> <!-- sounds like you have it set here -->
  <div><h1>Query Archive</h1></div>
  <div> <!-- and want it set here -->
    <table>
      <!-- ... -->
    </table>
  </div>
</div>

Для этого вам не нужно абсолютное позиционирование.

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

Вы захотите использовать tbody (тело таблицы) для хранения ваших данных и установить переполнение: прокрутите этот элемент, чтобы получить нужный эффект. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Page Title</title>

        <style type="text/css" media="screen">
        table {

            margin:0;
            padding:0px;
        }

        tbody {
                height:80px;
                overflow-x:hidden;
                overflow-y:scroll;
                margin:0;
                padding:0;
            }
        table td, table th{ padding:2px;}

        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr><th>Header</th><th>Header</th><th>Header</th><th>Header</th></tr>
            </thead>

            <tbody>
                <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>

            </tbody>
        </table>
    </body>
</html>
0 голосов
/ 23 января 2009

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

Если вы хотите, чтобы имя таблицы располагалось вне панели, из которой оно получено, возможно, вы могли бы использовать свойство CSS position: absolute (вместе со свойством top и left), чтобы поместить его в верхнюю часть стр.

Кроме того, вы можете использовать javascript, чтобы переопределить div. Например, если вы создаете пустой div в верхней части страницы, куда хотите поместить заголовок, и назначаете ему идентификатор titleParent и помещаете заголовок в div с идентификатором parent, следующий фрагмент кода javascript должен переместите заголовок из нижней панели в верхний: 

var title = document.getElementById('title');
document.getElementById('titleParent').appendChild(title);

Просто поместите этот фрагмент в блок <script> после нижней панели.

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

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

...