固定標題以上滾動表

我想要一個表頭，在一個單獨的div留在地方，而div undernearth是能夠滾動記錄的列表。兩者的div是一個div命名圖層3 Hereis我使用的CSS文件：我使用生成HTML的PHP代碼的固定標題以上滾動表

#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; 
}

和部分：

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>";

我不知道我錯過了什麼，但是tableheader看起來並不固定，甚至與tablecontent分開。

來源

2009-01-23 Joshxtothe4

div name不等於div id。＃Layer3引用具有Layer3標識的元素。只有一個元素被允許有一個給定的ID;所有的ID必須是唯一的。

不要忘了關閉你的標籤（表格）。

如果div＃Layer3滾動裏面的所有東西，那麼它有一些溢出設置。將其重新定義爲溢出：隱藏在＃Layer3樣式中。您可能需要嘗試使用邊距和浮動來確保事物的位置正確，但生病時會留下給您。

來源

2009-01-23 14:45:16 geowa4

我已經指出了溢出：auto並且它正在生成滾動條，即使我h沒有指定高度，但表頭與它滾動，我不明白的東西 – 2009-01-23 14:47:10

您忘記關閉主foreach（）循環後的<table>標記。

來源

2009-01-23 14:44:35 codeinthehole

允許我將你的問題簡化爲你感興趣的裸露元素。特別是，我將擺脫所有<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的後果是，您必須修復列的寬度...

來源

2009-01-23 15:25:59 pierdeux

固定標題以上滾動表

回答

相關問題