Question

我正在尝试使用表格标题，在单独的div中保留到位，而div undernearth能够滚动大量记录列表。这两个div都位于一个名为Layer 3的div中。这是我正在使用的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;
}

和我用来生成html的部分PHP代码：

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

您忘记在主foreach（）循环后关闭<table>标记。

Answer 2

div name不等于div id。＃Layer3引用id为Layer3的元素。只允许一个元素具有给定的id;所有ID都必须是唯一的。

不要忘记关闭标签（表格）。

如果div＃Layer3正在滚动其中的所有内容，那么它会有一些溢出设置。重新定义溢出：隐藏在＃Layer3样式中。您可能需要尝试使用边距和浮动来使事情处于正确的位置，但生病留给您。

Answer 3

请允许我将您的问题归结为您感兴趣的裸元素。特别是，我将摆脱所有<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的结果是您必须修复列的宽度...

修复了可滚动表上方的标题

3 个答案: