본문 바로가기

Local Oriented/HTML CSS JS

CSS tr:first-child 사용해서 목록에 라인 긋기

아래 table 구조에서 table 의 외곽에 실선이 그려져 있는 상태인데,

tr 마다 가로선을 그리고 싶다면..


<table>

  <tr>

    <td>...</td>

    <td>...</td>

    <td>...</td>

  </tr>
  <tr>

    <td>...</td>

    <td>...</td>

    <td>...</td>

  </tr>

  <tr>

    <td>...</td>

    <td>...</td>

    <td>...</td>

  </tr>
</table>


아래와 같이 모든 td 에는 위쪽으로 선을 그리고,

첫 줄(tr:first-child td) 에서는 위쪽으로 선을 그리지 않게 하면 된다.

<style>

  table tr td {border-top:1px #777 dotted}

  table tr:first-child td {border:none}

</style>



물론, 모든 td 아래쪽으로 선을 긋고,

마지막 줄(tr:last-child) 에 아래쪽으로 선을 그리지 않게 해도 된다.

 td {border:none}