[html,css] table(표) 배경색 넣기 / 줄바꿈처리 / 가로스크롤

1. 테이블 줄바꿈 처리

html

	

		

			
타이틀
			
타이틀
			
타이틀
		
	
	

		

			
내용이 많아도 영역 밖으로 흘러 넘치지 않습니다.내용이 많아도 영역 밖으로 흘러 넘치지 않습니다.
			
내용
			
내용
		
		

			
내용
			
내용
			
내용
		
		

			
내용
			
내용
			
내용
		
	

css

.table01 { width:500px; margin:0 auto; table-layout:fixed; text-align:center; }
.table01 thead tr {background:#444;}
.table01 thead tr th { padding:5px 0; color:#fff;}
.table01 tbody tr td { padding:5px 0; line-height:1.5;}
.table01 tbody tr {border-bottom:1px solid #ddd}
.table01 tbody tr:last-child {border-bottom:1px solid #aaa}

---

2. 테이블 줄바꿈 없이 가로스크롤 처리

html

	

		

			
타이틀
			
타이틀
			
타이틀
		
	
	

		

			
내용이 많아도 영역 밖으로 흘러 넘치지 않습니다.내용이 많아도 영역 밖으로 흘러 넘치지 않습니다.
			
내용
			
내용
		
		

			
내용
			
내용
			
내용
		
		

			
내용
			
내용
			
내용
		
	

css

.table01 { width:500px; margin:0 auto; table-layout:fixed; text-align:center; }
.table01 thead tr {background:#444;}
.table01 thead tr th { padding:5px 0; color:#fff;}
.table01 tbody tr td { padding:5px 0; line-height:1.5; white-space:nowrap; overflow-x:auto}
.table01 tbody tr {border-bottom:1px solid #ddd}
.table01 tbody tr:last-child {border-bottom:1px solid #aaa}