HTML 테이블의 스크롤바-HTML 튜토리얼-php.cn

HTML Table의 스크롤바는 가로 및 세로 형식의 데이터를 스크롤하는 기능 중 하나입니다. 기본적으로 세로 모드에서는 데이터 개수를 입력한 후 세로 스크롤 바가 활성화되어 크기를 최대화할 수 있습니다. 그러나 가로 모드에서는 줄 바꿈되지 않고 단락 형식으로 데이터를 입력한 후 페이지에 가로 스크롤 막대에서 데이터를 활성화하는 옵션으로 오른쪽 화살표가 포함됩니다. 마우스 포인터를 사용하여 스크롤 옵션을 사용자 정의했습니다. 스크롤 테이블의 테두리, 높이, 너비를 할당할 수도 있습니다.

HTML 테이블에 스크롤바 만들기

텍스트 상자의 내용이 너무 커서 들어갈 수 없는 경우 HTML 스크롤 상자를 사용하면 상자의 스크롤 막대가 커집니다. 모바일 앱과 같은 일부 애플리케이션은 스크롤 상자를 사용하여 해당 기능을 표시하지만 큰 모바일 화면에서는 일부 작은 모바일 화면 호환성이 양호하게 표시되지만 화면에는 표시되지 않습니다. 즉, 다음에서 사용되는 애플리케이션 기능입니다. 스크롤 상자. 브라우저 화면에서 사용되는 웹 애플리케이션의 일부 기능을 표시하려면 일부 플러그인이 필요합니다. HTML에 스크롤 막대 옵션을 추가하고 "오버플로" 옵션을 사용하며 수평 및 수직 스크롤 막대 추가를 위해 자동 활성화로 설정한다고 가정해 보겠습니다. HTML에 세로 막대 옵션을 추가하려면 파일에 "overflow-y" 줄을 추가하세요.

스크롤바에 대한 CSS 파일 구문

오버플로:스크롤:

{
Overflow-x:scroll;//add horizontal bar option in html
Overflow-y:scroll; //add vertical bar option in html
}

로그인 후 복사

스크롤바의 HTML 파일 구문

<스타일> 태그를 사용하면 HTML 페이지에 스크롤 옵션을 추가하겠습니다.

<style>
div.scroll
{
Width-5px;
Height-10 px;
Overflow-x:scroll;
}
</style>

로그인 후 복사

HTML 테이블의 스크롤바 예

HTML 테이블의 예는 다음과 같습니다.

예시 #1

코드:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.divScroll {
overflow:scroll;
height:100px;
width:200px;
}
</style>
</head>
<body>
<div class="divScroll">
SivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaraman
</div>
</body>
</html>

로그인 후 복사

출력:

HTML 테이블의 스크롤바

위 예에서는 가로 및 세로 막대에서 스크롤을 활성화했습니다. 텍스트가 텍스트 상자 제한을 초과하면 스크롤이 자동으로 활성화됩니다.

예시 #2

코드:

<html>
<style>
.divScroll {
overflow:scroll;
height:25px;
width:200px;
}
</style>
<body>
<center>
<marquee class="divScroll" color:"white">Welcome to my domain</marquee>
</center>
</body>
</html>

로그인 후 복사

출력:

HTML 테이블의 스크롤바