Исправлен заголовок над прокручиваемой таблицей

Question

Я пытаюсь получить заголовок таблицы, когда отдельный div остается на месте, а нижний div может прокручивать список записей. Оба div находятся в div с именем Layer 3. Вот файл css, который я использую:

#Layer3
{
    position:absolute;
    width: 89%;
    height: 40%;
    left: 10%;
    top: 56%;
    background-color: #f1ffff;
}

#Layer3 h1 {
    font-size: medium;
    color: #000033;
    text-decoration: none;
    text-align: center;
}

.tableheader {
}

.tablecontent {
    overflow: auto;
}

и часть php-кода, который я использую для генерации html:

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

echo "<h1>{$query} Auctions</h1>" . "\n"; 
echo "</div>";
echo '<div id="tablecontent" class="tablecontent">';

echo "<table border='0' width='100%'><tr>" . "\n"; 

echo "<td width='15%'>Seller ID</td>" . "\n";
echo "<td width='10%'>Start Date</td>" . "\n";
echo "<td width='75%'>Description</td>" . "\n";

echo "</tr>\n";

// printing table rows

foreach ($rows as $row)
{
    $pk = $row['ARTICLE_NO'];
    echo '<tr>' . "\n"; 

    // table contens generated in here

    echo '</tr>' . "\n"; 
}
}

echo "</div>";

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

Answer 1

имя div не равно div id. # Layer3 ссылается на элемент с идентификатором Layer3. Только один элемент может иметь данный идентификатор; все идентификаторы должны быть уникальными.

Не забудьте закрыть теги (таблицу).

Если div # Layer3 прокручивает все внутри, значит, у него установлено некоторое переполнение. Переопределите его для переполнения: скрыто в стиле # Layer3. Возможно, вам придется попробовать поиграть с полями и поплавками, чтобы правильно расположить вещи, но я оставлю это вам.

Answer 2

Позвольте мне описать вашу проблему только теми элементами, которые вам интересны. В частности, я избавлюсь от всех узлов <div>. Вот ваш самый простой стол:

<table>
   <thead class="tableheader">
      <tr>
         <th>Seller ID</th>
         <th>Start Date</th>
         <th>Description</th>
      </tr>
   </thead>
   <tbody class="scrolling">
      <tr>
         <td>28</td><td>25 January 2009</td><td>Hello World!</td>
      </tr>
      <tr> etc. </tr>
   </tbody>
</table>

(Обратите внимание на использование элемента <thead>.)

Теперь вот таблица стилей, которая произведет желаемую прокрутку:

.tableheader {
    display: block;
}

.scrolling {
    display: block;
    height: 300px;
    overflow: auto;
    width: 100%
}

th, td { /* first column */
    width: 200px
}

th + th, td + td { /* second column */
    width: 240px
}

th + th + th, td + td + td { /* third column */
    width: 316px
}

Обратите внимание, что следствием установки display:block является то, что вы должны фиксировать ширину столбцов ...

Answer 3

Вы забыли закрыть тег <table> после основного цикла foreach ().