html佈局 - 水平滾動

我已經創建了一個佈局，我需要。在這個佈局中，我想要圖片的第一行滾動。我無法在單個表中添加此屬性。html佈局 - 水平滾動

所以我創建了兩個表格上面只有一個將滾動的行。底部表格將包含不會滾動的兩行。

兩個問題： -
1>我已經將滾動屬性添加到上表的div，但它顯示兩個表。我只想滾動頂部表格。
2>此外，GUI僅覆蓋網頁的一半（如何使其覆蓋網頁的整個高度）。

請對此建議。

<!DOCTYPE html> 
<html> 

<style> 

div.scrollable { 
    width: 100%; 
    height: 0%; 
    margin: 0; 
    padding: 0; 
    overflow: auto; 
} 

</style> 

<body> 


<div class=scrollable> 
<table > 
    <tr> 

    <td colspan="2" style="background-color:#CC99FF; white-space:nowrap;"> 

    <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" /> 

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" /> 

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" /> 

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" /> 

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" /> 

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" /> 

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" /> 

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" /> 

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" /> 

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" /> 

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" /> 

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" /> 

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" /> 

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" /> 

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" /> 


<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" /> 

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" /> 

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" /> 

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" /> 

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" /> 

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" /> 

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" /> 

    </td> 
    </tr> 
</div> 


</table> 





<div> 

<table width="100%" border="0"> 

    <tr valign="top"> 
    <td style="background-color:#FFCCFF; 
        width:100px;text-align:top;"> 
     <b>Main Menu</b><br /> 
     BUTTON-1<br /> 
     BUTTON-2<br /> 
     BUTTON-3 
    </td> 

    <td style="background-color:#eeeeee;height:200px; 
        width:300px;text-align:top;"> 
     Table center 
    </td> 

    </tr> 
    <tr> 
    <td colspan="2" style="background-color:#CC99FF;"> 
     <center> 
     Copyright © 2014 My First Layout 
     </center> 
    </td> 
    </tr> 
</table> 

</div> 

</body> 
</html>

來源

2014-03-14 Katoch

您正在使用此表的任何原因？ – Ruddy

然後用什麼..？我提到這個教程.. http://www.w3schools.com/html/html_layout.asp – Katoch

在該網站上，它甚至說'使用

創建一個漂亮的佈局不是元素的正確使用。

元素的目的是顯示錶格數據！'。我會推薦使用'div'等... – Ruddy

回答

對於初學者來說，你有一個DIV嵌套錯誤和表：

<div class=scrollable> 
<table > 
... 
</div> 
</table>

其次，在表內的div並沒有任何意義。把它放在你內心的TD手機中：

<table> 
<tr><td> 
<div> 
... 
</div> 
</td> 
</tr> 
</table>

第三，你有你的TD從第一個表中colspan屬性，但只有一個表格單元格。這應該被刪除。

最後，這不起作用的主要原因是因爲你有一個容器單元的大小爲100％的div，它沒有最大寬度，所以一切都會相應地擴展，因爲沒有滿足條件停止它。

解決的辦法是：使用max-width有一個固定的值與圖像的細胞：

<td style="max-width:1024px; background-color:#CC99FF; white-space:nowrap;">

來源

2014-03-14 07:47:25 bosnjak

第一個答案是工作...你的第二個選擇將永遠不會工作..我已經嘗試過。 – Katoch

Div不在單元格中，但表格中的其他位置幾乎總是會打破布局。檢查這篇文章：http://css-tricks.com/using-divs-inside-tables/ – bosnjak

不，我沒有嘗試過這之前，它不工作..你可以顯示.... http://jsfiddle.net/ – Katoch

管理你的HTML DIV結構：

input[type="image"]{ 
    float:left; 
}

來源

2014-03-14 07:55:41

在我的Div結構中加入這個優點是什麼？id沒有看到任何區別。 – Katoch

相關問題