Display Property

From www.w3schools.com/cssref/pr_class_display.asp

속성값 중에 "line-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group" 그리고 "inherit" 는 IE7과 그 이하 버전은 지원하지 않습니다. IE8의 경우, !DOCTYPE 선언이 필요합니다. IE9는 속성값을 지원합니다.

display 속성값 표
속성값 설명
none The element will be displayed at all
block The element is displayed as a block element(like paragraphs and header). A block element has some whitespace above and below it and does not tolerate any HTML eleement next to it
inline This is default. The element is displayed as an inline element(like span). An inline element has no line break before or after it, and it tolerates HTML element next to it
inline-block The element is placed as an inline element(or the same line as adjacent content), but it behaves as a block element
inline-table the element is displayed as an inline table
list-item The element is displayed as a list-item, which means that it has a bullet in front of it
table the element is displayed as a table
table-caption the element is displayed as a table caption
table-cell the element is displayed as a table cell (like <td> or <th> )
table-column the element is displayed as a table column (like <col> )
table-column-group the element is displayed as a table column group(like <colgroup> )
table-footer-group the element is displayed as a table footer row group
table-header-group the element is displayed as a table header row group
table-row the element is displayed as a table row
inherit the value of the display property will be inherited from the parent element

display:table-*를 이용해서 table 형식으로 구현

HTML

							

TABLE

  • 다음
  • 네이버
  • 구글
  • 다음
  • 네이버
  • 구글


CSS

							.display_table {display:table;border:1px solid #787878;border-collapse:collapse;}
							.display_table p{display:table-caption;border:1px solid red;text-align:center;}
							.display_table ul{display:table-row;border:1px solid #787878;}/*tr*/
							.display_table ul li{display:table-cell;padding:10px;border:1px solid #787878;}/*td*/									
						

구현 형식

display-table-*을 형식으로 적용한 경우

TABLE

  • 다음
  • 네이버
  • 구글
  • 다음
  • 네이버
  • 구글



table 요소로 구현된 경우

TABLE
다음 네이버 구글
다음 네이버 구글



javascript에서 사용한 경우

swipe.js 에서 사용

슬라이더 객체의 display의 속성을 'table-cell'로 바꾸어 수평으로 나열시킴

							// dynamic css
							this.element.style.width = (this.slides.length * this.width) + 'px';
							var index = this.slides.length;
							while (index--) {
							  var el = this.slides[index];
							  el.style.width = this.width + 'px';
							  el.style.display = 'table-cell';
							  el.style.verticalAlign = 'top';
							}