흑횽DX

게시판 만들면서 웹표준 ul 테이블

· 2016-03-02 (수) 02:18:08 · 2146 · 2

만들어봤습니다.

테이블이 아닌 테이블 필요하신 분 쓰세염 ^^

다 만든것이 아니여서 좀 튜닝하셔야 할듯합니다.

 

 

.wrap_boadTable {border-top:2px solid #333}

.wrap_boadTable ul {}

.wrap_boadTable ul li {float:left}

.wrap_boadTable .header {border:1px solid #ddd}

.wrap_boadTable .header li {height:42px; line-height:42px; font-size:1.22em; text-align:center; font-weight:bold}

.wrap_boadTable ul:after  { content: ".";  display: block;  height: 0; clear:both; visibility: hidden}

.wrap_boadTable ul .column1 {width:10%; border-right:1px solid #ddd; text-align:center;}

.wrap_boadTable ul .column2 {width:50%; margin-left:-1px; border-right:1px solid #ddd}

.wrap_boadTable ul .column3 {width:15%; margin-left:-1px; border-right:1px solid #ddd; text-align:center;}

.wrap_boadTable ul .column4 {width:15%; margin-left:-1px; border-right:1px solid #ddd; text-align:center;}

.wrap_boadTable ul .column5 {width:10%; margin-left:-1px;text-align:center;}

 

.wrap_boadTable .list ul {border:1px solid #ddd; margin-top:-11px;}

.wrap_boadTable .list ul:hover {background:#f5f5f5}

.wrap_boadTable .list ul li {}

.wrap_boadTable .list ul li a {}

 

 

<div class="wrap_boadTable">

<ul class="header">

<li class="column1">번호</li>

<li class="column2">제목</li>

<li class="column3">글쓴이</li>

<li class="column4">날짜</li>

<li class="column5">조회</li>

</ul>

 

<div class="list">

<ul>

<li class="column1" id="boNum"><a href="">5690</a></li>

<li class="column2" id="boTitle"><a href="">fdsfds</a></li>

<li class="column3" id="boName"><a href="">fdsfds</a></li>

<li class="column4" id="boDate"><a href="">fdsfds</a></li>

<li class="column5" id="boHit"><a href="">fdsfds</a></li>

</ul>

 

<ul>

<li class="column1"><a href="">5690</a></li>

<li class="column2"><a href="">fdsfds</a></li>

<li class="column3"><a href="">fdsfds</a></li>

<li class="column4"><a href="">fdsfds</a></li>

<li class="column5"><a href="">fdsfds</a></li>

</ul>

</div>

</div>

|

댓글 2개

http://stackoverflow.com/questions/3053205/how-create-table-only-using-div-tag-and-css

div 를 css 를 통해 테이블처럼 사용해도 좋죠
DIV 테이블은 저도 예전에 사용했었습니다.
그러나, UI로 하는것이 현명할듯합니다.
좋은 정보 감사합니다.
댓글을 작성하시려면 로그인이 필요합니다.

자유게시판

202,958건
+
제목 글쓴이 날짜 조회
16-03-02 조회 2,123
16-03-02 조회 2,007
16-03-02 조회 2,358
16-03-02 조회 1,914
16-03-02 조회 2,289
16-03-02 조회 1,668
16-03-02 조회 1,296
16-03-02 조회 1,287
16-03-02 조회 1,876
16-03-02 조회 1,975
16-03-02 조회 1,943
16-03-02 조회 1,980
16-03-02 조회 1,867
16-03-02 조회 1,297
16-03-02 조회 2,147
16-03-02 조회 1,122
16-03-01 조회 1,909
16-03-01 조회 1,320
16-03-01 조회 1,358
16-03-01 조회 1,233