HTML 레이아웃 - 수평 스크롤

나는 내가 필요로 레이아웃을 만들었습니다. 이 레이아웃에서 스크롤 할 이미지가있는 맨 위 행을 원합니다. 이 속성을 단일 테이블에 추가 할 수 없었습니다. HTML 레이아웃 - 수평 스크롤

그래서 스크롤 될 하나의 행과 상위 두 테이블을 생성. 하단 테이블에는 스크롤되지 않는 두 개의 행이 포함됩니다.

두 가지 문제점 : -
1> 위의 표의 div에 scroll 속성을 추가했지만 두 표 모두에 대해 보여줍니다. 내가 상위 테이블 만 스크롤 싶어요. 또한 GUI는 반에게 웹 페이지를 덮고 2
> (이것은 웹 페이지의 전체 높이를 커버 만드는 방법).

제발 제안하십시오.

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

이 두 번째로, 테이블 내부 사업부는 이해가되지 않습니다 우선 들어

<!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에 대한 잘못된 중첩 테이블이있다. 당신의 내면의 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

사업부는 셀에있는 어딘가 다른 테이블이 거의 항상 레이아웃을 중단하지. http://css-tricks.com/using-divs-inside-tables/ – bosnjak

아니, 난 그것이 작동하지 전에이 시도 .. 당신이 보여줄 수있는 .... http://jsfiddle.net/ :이 문서 확인 내가 전에이 작업을 수행 한 노력 텍스트로 http://jsfiddle.net/rPdc6/ – Katoch

은 html로 div의 구조 관리 :

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

출처

2014-03-14 07:55:41

내 div 구조 내에서 이것을 추가하는 이점은 무엇입니까 .. id는 차이점을 보지 못했습니다. – Katoch

HTML 레이아웃 - 수평 스크롤

답변

관련 문제