HTML 테이블의 스크롤바
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>출력:
위 예에서는 가로 및 세로 막대에서 스크롤을 활성화했습니다. 텍스트가 텍스트 상자 제한을 초과하면 스크롤이 자동으로 활성화됩니다.
예시 #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>출력:
위의 예에서는
예시 #3
아래 예에서는 웹 페이지에 픽셀 형식으로 표시되는 데이터의 양에 대한 알림 기능을 사용하겠습니다.
코드:
<html> <body> <center> <div id="example" class="overflow-y:scroll;width:100px;height:200px;border:1px solid black" color:"white"> <marquee>Welcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domain </marquee> </div> <button onclick="alert( getComputedStyle(example).width )">alert( getComputedStyle(example).width )</button> </center> </body> </html>
출력:
예시 #4
테이블 행
코드:
<html> <body> <center> <div style="overflow-x:auto;"> <table> <tr> <th>Welcome to my domain</th> <th>Name</th> <th>Email</th> </tr> <tr> <td>Sivaraman</td> <td>Sivaraman</td> <td>[email protected]</td> </div> </center> </body> </html>
출력:
예시 #5
여기서 HTML의 다양한 유형의 스크롤 상자를 살펴보겠습니다
- 컬러 스크롤 상자
- 맞춤형 스크롤바
- 이미지가 포함된 스크롤 상자
- 테두리가 있는 스크롤 상자
1. 컬러 스크롤 상자
스크롤 상자 옵션에서는 아래 예와 같이 텍스트 상자 공간 영역에 다양한 유형의 색상을 추가했습니다.
코드:
<html> <body> <div style="height:125px;width:100px;overflow:auto;background-color:yellowgreen;color:white;scrollbar-base-color:gold;font-family:sans-serif;padding:10px;">Welcome to my domain.Welcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domain</div> </body> </html>
출력:
위 예에서는 스크롤 패널에도 동일하게 텍스트 색상을 지정했습니다.
2. 맞춤형 스크롤바
Webkit 확장을 사용하여 스크롤 막대를 사용자 정의했습니다. 브라우저에서 작동합니다.
코드:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin-bottom: 200%;
}
.scroll {
border: none;
padding: 5px;
font: 24px/36px sans-serif;
width: 200px;
height: 200px;
overflow: scroll;
}
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
border: 1px solid yellowgreen;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: yellowgreen;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #88ba1c;
}
</style>
</head>
<body>
<div class="scroll">
Welcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domain
</div>
</body>
</html>출력:
위 코드에서는 전체 페이지에 스크롤 옵션이 표시됩니다. 이는 맞춤형 옵션입니다. 전체 배경 화면에서 스크롤 옵션을 활성화했습니다. 한 번은 CSS 스타일의 웹킷 도구가 일부 브라우저를 허용하지 않는 경우가 있기 때문에 브라우저 호환성도 확인했습니다. 예를 들어 Microsoft에는 –ms- 확장 및 –Webkit- 확장과 같은 기타 브라우저 공급업체가 있습니다.
3. 이미지가 포함된 스크롤 상자
배경 이미지나 전경 이미지에도 스크롤 상자를 사용했습니다. 이 기능의 몇 가지 기본 예를 살펴보겠습니다.
코드:
<html> <div style="height:180px;width:180px;overflow:auto;"> <img src="C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg" alt="Sample picture for scroll box"> </div> </html>
출력:
4. Scroll Box Borders
We have also added the borders in the scroll panel areas. It will appear like highlighted portion Example below:
Code:
<div style="height:100px;width:140px;overflow:auto;border:8px solid yellow;padding:3%">Welcome to My DomainWelcome to My Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain.</div>
Output:
The above picture highlights the scroll area. Similarly, we can also add different borders like dotted, dashed, double borders, etc.
Features of Scrollbar in HTML Table
When we use the Scroll box, it may have some features like.,
- Simple and lightweight
- Autoplay
- Multiple instances on one page
- Useful options for customizing your text in a scrolling
- We can also use the jquery library in scroll boxes for features like Previous/Next navigation buttons
Conclusion
In General, We have used many features in the HTML language, but the Scroll bar is one of the best features for crisping the data on the web page for displaying the contents. The above examples and points are in basics; meanwhile, we will have many advanced concepts and features in the HTML and CSS with Scroll bar options. The Latest Versions, HTML 5, and CSS 3, may add some options in the text scroll areas.
위 내용은 HTML 테이블의 스크롤바의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
HTML의 테이블 테두리
Sep 04, 2024 pm 04:49 PM
HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.
HTML의 중첩 테이블
Sep 04, 2024 pm 04:49 PM
HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.
HTML 여백-왼쪽
Sep 04, 2024 pm 04:48 PM
HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.
HTML 테이블 레이아웃
Sep 04, 2024 pm 04:54 PM
HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.
HTML 입력 자리 표시자
Sep 04, 2024 pm 04:54 PM
HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.
PHP에서 HTML/XML을 어떻게 구문 분석하고 처리합니까?
Feb 07, 2025 am 11:57 AM
이 튜토리얼은 PHP를 사용하여 XML 문서를 효율적으로 처리하는 방법을 보여줍니다. XML (Extensible Markup Language)은 인간의 가독성과 기계 구문 분석을 위해 설계된 다목적 텍스트 기반 마크 업 언어입니다. 일반적으로 데이터 저장 AN에 사용됩니다
HTML 정렬 목록
Sep 04, 2024 pm 04:43 PM
HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.
HTML 온클릭 버튼
Sep 04, 2024 pm 04:49 PM
HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.
