CSS / 표(table) 꾸미기 / 틀 고정(행 또는 열 고정) 만들기

엑셀에 틀 고정이라는 기능이 있다. 틀 고정을 사용하면 상하 또는 좌우로 스크롤해도 항상 보이는 행 또는 열을 만들 수 있다. CSS로도 같은 효과를 낼 수 있다. 이를 구현하기 위해 사용하는 속성은 display: sticky이다.

예를 들어 다음과 같은 표가 있다고 하자.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      table#jb-table th, table#jb-table td { padding: 20px 80px; border: 1px solid #444444; }
      table#jb-table th { background-color: #eeeeee; }
      table#jb-table tbody tr td:first-child { background-color: #eeeeee; }
    </style>
  </head>
  <body>
    <h1>Sticky</h1>
    <table id="jb-table">
      <thead>
        <tr>
          <th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>F</th><th>G</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
        </tr>
        <tr>
          <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
        </tr>
        <tr>
          <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
        </tr>
        <tr>
          <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
        </tr>
        <tr>
          <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
        </tr>
        <tr>
          <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
        </tr>
        <tr>
          <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
        </tr>
        <tr>
          <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
        </tr>
        <tr>
          <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
        </tr>
        <tr>
          <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
        </tr>
        <tr>
          <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>F</th><th>G</th>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

웹브라우저 창 크기가 충분히 크면 모든 내용을 볼 수 있으나...

그렇지 않은 경우 상하좌우 스크롤이 생긴다.

내용을 보기 위해 스크롤 하다보면 무엇에 대한 값인지 알 수가 없다.

제1행을 고정하고 싶다면 다음 코드를 CSS에 추가한다.

table#jb-table thead { position: sticky; top: 0; }

상하 스크롤을 해도 제1행은 항상 보인다.

제1열을 고정하고 싶다면 다음 코드를 CSS에 추가한다.

table#jb-table th:first-child,
table#jb-table td:first-child { position: sticky; left: 0; }

좌우 스크롤을 해도 제1행은 항상 보인다.

제1행과 제1열을 고정하기 위해, 위에 사용했던 코드를 다 넣으면...

table#jb-table thead { position: sticky; top: 0; }
table#jb-table th:first-child,
table#jb-table td:first-child { position: sticky; left: 0; }

제1행 제1열의 셀이 가려지게 된다.

이를 해결하는 방법은 z-index를 추가하는 것이다.

table#jb-table thead { position: sticky; top: 0; z-index: 1; }
table#jb-table th:first-child,
table#jb-table td:first-child { position: sticky; left: 0; }

이제 상하좌우 스크롤을 해도 제1행과 제1열은 항상 보인다.

마지막 행도 고정하고 싶다면 다음과 같이 한다.

table#jb-table thead { position: sticky; top: 0; z-index: 1; }
table#jb-table th:first-child,
table#jb-table td:first-child { position: sticky; left: 0; }
table#jb-table tfoot { position: sticky; bottom: 0; }

제1열과 제2열을 고정하고 싶다면 다음과 같이 한다. 제2열의 left 값은 제1열의 크기에 맞게 적절히 정한다.

table#jb-table th:first-child,
table#jb-table td:first-child { position: sticky; left: 0; }
table#jb-table th:nth-child(2),
table#jb-table td:nth-child(2) { position: sticky; left: 183px; }
같은 카테고리의 다른 글
CSS / 상속(inheritance)

CSS / 상속(inheritance)

상속(inheritance) CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩니다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다. 예를 들어 color는 상속하는 속성입니다. 부모 요소에서 정한 색이 자식 요소에도 적용됩니다. 예를 들어 padding은 상속하지 않는 속성입니다. 부모 요소에서 padding을 정의해도 자식 요소에 적용되지 않습니다. 예제 color는 상속하는 속성이므로 자식 요소의 ...

CSS / 이미지 버튼 만들기

CSS / 이미지 버튼 만들기

버튼을 꾸미는 방법 중의 하나는 이미지를 이용하는 것입니다. 적당한 크기의 버튼을 만듭니다. 그 크기에 맞는 이미지를 배경으로 정합니다. 다음은 32x32 크기의 돋보기 이미지를 이용해서 버튼을 꾸미는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> input { ...

CSS / 반응형 레이아웃 만들기

CSS / 반응형 레이아웃 만들기

반응형 웹디자인 웹사이트의 레이아웃을 만들 때 방문자가 사용하는 모니터의 화면 해상도를 고려해야 합니다. 너무 크게 가로폭을 만들면 작은 해상도의 모니터로 접속했을 때 가로 스크롤이 생겨 컨텐츠를 보는 게 불편하기 때문입니다. 특히 스마트폰이나 태블릿 등 모바일 기기는 화면이 작기 때문에 가독성에 더욱 신경써야 합니다. 이러한 문제를 해결하는 방법 중의 하나가 반응형 웹디자인입니다. 해상도에 따라 ...

CSS / z-index / 요소의 수직 위치 정하는 속성

CSS / z-index / 요소의 수직 위치 정하는 속성

z-index position 속성을 이용하면 요소를 겹치게 놓을 수 있습니다. 이때 요소들의 수직 위치를 z-index 속성으로 정합니다. 값은 정수이며, 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록 아래로 내려갑니다. 예제 1 세 개의 div 요소를 겹치게 배치했습니다. 코드 상 나중에 입력한 것일 수록 위로 올라옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { width: 100px; height: 100px; position: absolute; } div.x { background-color: #2196F3; top: ...

CSS / radial-gradient - 원형 그라데이션 효과 만들기

CSS / radial-gradient - 원형 그라데이션 효과 만들기

radial-gradient radial-gradient로 원형 그라데이션 효과를 만들 수 있습니다. CSS3에서 추가된 것으로,인터넷 익스플로러는 버전 10 이상에서 사용할 수 있습니다. 문법 radial-gradient( shape size at position, color1, color2, ..., color3 ) shape : 원 모양인지 타원 모양인지 정합니다. size : 크기를 정합니다. position : 중심의 위치를 정합니다. color : 색을 정합니다. 아래의 예제로 하나씩 알아보겠습니다. 예제 1 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div.jb { margin: ...

CSS / Flex / IE에서 flex-basis 오류 해결하는 방법

CSS / Flex / IE에서 flex-basis 오류 해결하는 방법

Flex를 이용하여 다단 배열을 만들려고 합니다. 내용에 상관없이 같은 폭을 가진 다단 배열을 만든다면 flex-basis를 사용하는 게 편합니다. 아래는 Flex를 이용한 간단한 2단 배열입니다. box-sizing의 값을 border-box로 설정하고, flex-basis의 값을 50%로 하면 간단히 만들어집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / 상대적인 크기를 정하는 em 단위와 rem 단위의 차이

CSS / 상대적인 크기를 정하는 em 단위와 rem 단위의 차이

CSS의 길이 단위 중 em과 rem은 상대적으로 크기를 정합니다. em - 상위 요소 기준 em 단위는 상위 요소 크기의 몇 배인지로 크기를 정합니다. 예를 들어 font-size: 1.5em; 은 글자 크기를 상위 요소 크기의 1.5배로 하겠다는 뜻입니다. 간단한 예제를 만들어보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...

CSS / 문법

CSS / 문법

문법 CSS 문법은 선택자(selector), 속성(property), 값(value)의 조합으로 구성됩니다. 다음은 가장 간단한 CSS 코드입니다. h1 { color: red } h1, color, red 세 개의 단어가 있는데 각각 선택자, 속성, 값입니다. 선택자(selector) : 무엇을 꾸밀지 정합니다. h1은 h1 요소를 꾸미겠다는 뜻입니다. 태그, 클래스, ID 등 다양한 선택자가 있습니다. 속성(property) : 어떤 모양을 꾸밀지 정한다. color는 색을 꾸미겠다는 ...

CSS / background-color / 배경색을 정하는 속성

CSS / background-color / 배경색을 정하는 속성

개요 background-color로 배경의 색을 정합니다. 그 색으로 border와 padding을 포함한 영역을 칠합니다. margin 영역은 칠하지 않습니다. 기본값 : transparent 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 background-color: transparent | color | initial | inherit transparent : 배경색이 없습니다. color : 색을 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 1 바깥 여백(margin)은 칠하지 않고, 안쪽 여백(padding)은 칠한다는 것을 ...

CSS / border-radius / 테두리 둥글게 만드는 속성

CSS / border-radius / 테두리 둥글게 만드는 속성

border-radius border-radius는 테두리를 둥글게 만드는 속성입니다. CSS3에서 정의되었으며, IE는 버전 9부터 지원합니다.(IE8에서 사용하는 방법) 8개의 속성 값을 넣어야 하지만, 값이 같다면 짧게 쓸 수 있습니다. 다음 상자의 테두리를 여러 가지 방식으로 둥글게 만들어보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { box-sizing: border-box; width: 200px; height: 200px; margin: 20px auto; background-color: orange; } </style> </head> <body> <div class="jb"></div> </body> </html> 문법 1 border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y 속성의 ...