티스토리 뷰

💼 정보 ver1.0

테이블과 스타일

James Wetzel 2013. 1. 24. 11:52
728x90
반응형

<style type="text/css">

     #table-1{     

    border: 1px solid #e3e3e3;

    background-color: #f2f2f2;

         width: 100%;

    border-radius: 6px;

    -webkit-border-radius: 6px;

    -moz-border-radius: 6px;

     }

     #table-1 td, #table-1 th {

    padding: 5px;

    color: #333;

     }

     #table-1 thead {

    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

    padding: .2em 0 .2em .5em;

    text-align: left;

    color: #4B4B4B;

    /*배경 색상 변경*/

    background-color: #C8C8C8;

    background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#e3e3e3), color-stop(.6,#B3B3B3));

    background-image: -moz-linear-gradient(top, #D6D6D6, #B0B0B0, #B3B3B3 90%);

    border-bottom: solid 1px #999;

     }

     #table-1 th {

    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    font-size: 17px;

    line-height: 20px;

    font-style: normal;

    font-weight: normal;

    text-align: center;

    text-shadow: white 1px 1px 1px;

     }

     #table-1 td {

    line-height: 20px;

    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    font-size: 14px;

    border-bottom: 1px solid #fff;

    border-top: 1px solid #fff;

     }

     #table-1 tbody tr:hover {

    background-color: #fff;

     }

    </style> 



<table id="table-1">

    <thead>

   <th style="width:10%">번호</th>

<th style="width:75%">제목</th>

<th style="width:15%">작성일</th>

</thead>

<tbody>

    <%

        foreach(DataRow row in ((DataSet)Model).Tables["Notice"].Rows)

        {

    %>    

        <tr>

            <td style="text-align:center"><%: row["No"] %></td>

            <td><%: row["title"] %></td>

            <td style="text-align:center"><%: string.Format("{0:d}", row["registerDate"]) %></td>

        </tr>

    <%        

        }

    %>  

</tbody>

 </table>

728x90
반응형