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

코드:

<title></title>
<style>
.divScroll {
overflow:scroll;
height:100px;
width:200px;
}
</style>


<div class="divScroll">
SivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaraman
</div>

출력:

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

예시 #2

코드:

<style>
.divScroll {
overflow:scroll;
height:25px;
width:200px;
}
</style>

<center>
<marquee class="divScroll" color:>Welcome to my domain</marquee>
</center>

출력:

위의 예에서는 를 사용했습니다. 스크롤 옵션을 사용하여 선택 윤곽 내에 텍스트를 표시합니다. 스크롤 막대의 텍스트에 애니메이션을 적용할 수 있습니다. 다양한 세트 Faster Scrolling, Faster Bounce, Text 스크롤 다운, Text Scrolling Up, Jumping Text, Normal Speed ​​등도 사용됩니다.

예시 #3

아래 예에서는 웹 페이지에 픽셀 형식으로 표시되는 데이터의 양에 대한 알림 기능을 사용하겠습니다.

코드:

<center>
<div id="example" class="overflow-y:scroll;width:100px;height:200px;border:1px solid black" color:>
<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>

출력:

예시 #4

테이블 행

, 테이블 헤더 , 테이블 데이터 , 태그는 HTML에서 사용됩니다. 태그를 사용하면 스타일 자체가 활성화됩니다. 즉,

코드:

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




<p><strong>출력:</strong></p>
<p><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543961926881.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="HTML 테이블의 스크롤바" ></p>
<h4 id="예시">예시 #5</h4>
<p>여기서 HTML의 다양한 유형의 스크롤 상자를 살펴보겠습니다</p>
<ul>
<li>컬러 스크롤 상자</li>
<li>맞춤형 스크롤바</li>
<li>이미지가 포함된 스크롤 상자</li>
<li>테두리가 있는 스크롤 상자</li>
</ul>
<h5 id="컬러-스크롤-상자">1. 컬러 스크롤 상자</h5>
<p>스크롤 상자 옵션에서는 아래 예와 같이 텍스트 상자 공간 영역에 다양한 유형의 색상을 추가했습니다.</p>
<p><strong>코드:</strong></p>
<pre class="brush:php;toolbar:false">

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

출력:

위 예에서는 스크롤 패널에도 동일하게 텍스트 색상을 지정했습니다.

2. 맞춤형 스크롤바

Webkit 확장을 사용하여 스크롤 막대를 사용자 정의했습니다. 브라우저에서 작동합니다.

코드:

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


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

출력:

위 코드에서는 전체 페이지에 스크롤 옵션이 표시됩니다. 이는 맞춤형 옵션입니다. 전체 배경 화면에서 스크롤 옵션을 활성화했습니다. 한 번은 CSS 스타일의 웹킷 도구가 일부 브라우저를 허용하지 않는 경우가 있기 때문에 브라우저 호환성도 확인했습니다. 예를 들어 Microsoft에는 –ms- 확장 및 –Webkit- 확장과 같은 기타 브라우저 공급업체가 있습니다.

3. 이미지가 포함된 스크롤 상자

배경 이미지나 전경 이미지에도 스크롤 상자를 사용했습니다. 이 기능의 몇 가지 기본 예를 살펴보겠습니다.

코드:

<div style="height:180px;width:180px;overflow:auto;">
<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543964762888.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Sample picture for scroll box">
</div>

출력:

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.