yoursyun

ul 태그로 테이블 처럼 사용 하기 위한 style 본문

HTML/Layout

ul 태그로 테이블 처럼 사용 하기 위한 style

yoursyun 2013. 8. 9. 17:02

.table_style { width:300px; position:relative; padding-top:10px; }

.table_style ul {

clear: left;

margin: 0;

padding :0;

list-style-type: none;

}

.table_style ul.header li {

font-weight:bold;

text-align:center;

border-top: 1px solid #000;

}

.table_style ul li {

float: left;

margin: 0;

padding: 2px 1px;

border-bottom: 1px solid #000;

border-left: 1px solid #000;

}

.table_style ul .column1 {

width: 60px;

}

.table_style ul .column2 {

width: 230px;

border-right: 1px solid #000;

}



<div class="table_style">

<ul class="header">

<li class="column1">위치</li>

<li class="column2">물품명</li>

</ul>

<c:forEach var="equipment" items="${EquipRevList}">

<ul>

<li class="column1">m</li>

<li class="column2"><c:out value="${equipment.nmEquipment}" /></li>

</ul>

</c:forEach>

</div>

반응형