표에서 빈 셀의 테두리 표시 여부를 정하는 속성

CSS
Created 2018-06-29 Last Modified 2020-10-23

개요

empty-cells은 표(table)에서 빈 셀의 테두리를 표시할지 말지는 정하는 속성입니다.

기본값 : show
상속 : Yes
애니메이션 : No
버전 : CSS Level 2

문법

empty-cells: show | hide | initial | inherit

show : 빈 셀의 테두리를 보여줍니다.
hide : 빈 셀의 테두리를 숨깁니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      table {
        width: 100%;
        margin: 20px 0px;
        border: 1px solid #999999;
      }
      td {
        border: 1px solid #999999;
        padding: 10px;
      }
      table.a {
        empty-cells: show;
      }
      table.b {
        empty-cells: hide;
      }
      table.c {
        empty-cells: hide;
        border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <table class="a">
      <tr><td>Lorem</td><td>Ipsum</td></tr>
      <tr><td>Dolor</td><td></td></tr>
    </table>
    <table class="b">
      <tr><td>Lorem</td><td>Ipsum</td></tr>
      <tr><td>Dolor</td><td></td></tr>
    </table>
    <table class="c">
      <tr><td>Lorem</td><td>Ipsum</td></tr>
      <tr><td>Dolor</td><td></td></tr>
    </table>
  </body>
</html>

첫 번째 표는 빈 셀의 테두리를 표시합니다.
두 번째 표는 빈 셀의 테두리를 표시하지 않습니다.
세 번째 표처럼 table의 border-collapse 속성의 값이 collapse인 경우, empty-cells 속성은 의미가 없습니다.

CSS

CSS / opacity / 요소를 투명하게 만드는 속성

개요 opacity로 요소의 투명도를 정할 수 있습니다. 기본값 : 1 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 opacity: number | initial | inherit number : 0.0부터 1.0까지의 수를 넣습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 숫자가 작을수록 투명해집니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS Reference ...

CSS / 이미지 가운데 정렬하는 방법

이미지를 가운데 정렬하는 방법은 여러 가지가 있습니다. 그 중 자주 사용되는 두 가지를 소개합니다. 두 방법 모두 아래처럼 이미지를 가운데에 놓습니다. 방법 1 이미지의 부모 요소에 text-align 속성을 추가하는 방법입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { text-align: center; } </style> </head> <body> <div> <img src="images/200x200.png" alt=""> </div> </body> </html> 방법 2 부모 요소를 사용할 수 없고 이미지만 스타일링이 가능하다면, img 요소를 block 요소로 만든 ...

CSS / display 속성의 값을 inline 또는 inline-block으로 했을 때 여백 조정하는 방법

inline 또는 inline-block의 여백 display 속성값으로 inline 또는 inline-block으로 정하면 요소들이 가로로 배열됩니다. 이 때 요소와 요소 사이에 여백이 생깁니다. 예를 들어 다음과 같이 순서 없는 목록을 가로로 배열해보겠습니다.(여백을 파악하기 위해 테두리를 만들었습니다.) <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / Flex / flex-direction

flex-direction으로 Item의 배열 방향을 정합니다. 기본값은 row로, 왼쪽에서 오른쪽으로 배열합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb-container { height: 400px; padding: ...

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에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다. text-align: center; 요소의 가로 가운데 정렬은 margin 속성을 이용합니다. margin-left: auto; margin-right: auto; 그렇다면 다음처럼 세로 정렬을 가운데로 하려면 어떻게 해야 할까요? 방법 1 - padding 속성 이용하기 바깥쪽 요소에 padding 속성을 추가해서 세로 정렬을 가운데로 할 수 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성

CSS3의 transform 속성으로 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있습니다. IE는 버전 10 이상부터 지원한다는 것에 주의합니다. transform / rotate transform의 rotate로 요소를 회전시킬 수 있습니다. 문법 transform: rotate( angle ) transform: rotateX( angle ) transform: rotateY( angle ) angle에는 각의 크기를 입력합니다. 단위는 deg, rad, grad, turn 등을 사용합니다. turn은 1회전, 즉 360deg를 의미합니다. 예제 마우스를 올렸을 때 회전합니다. 회전하는 ...

CSS / 마우스 오버 효과 / 다른 이미지 보여주기

이미지에 마우스를 올렸을 때 다른 이미지가 나타나는 효과를 CSS로 만들어보겠습니다. display 속성 이용하기 다음과 같이 이미지 두 개를 넣고 div로 감쌉니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...

CSS / Flex / align-items

align-items로 교차축(cross axis) 아이템 정렬을 정합니다. 예를 들어 flex-direction의 값이 row인 경우 수직 정렬을 정합니다. 아래는 flex-direction: row일 때의 예제입니다. 기본값은 stretch로, 콘테이너의 높이에 맞게 늘립니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...

CSS / Flex / align-content