Home › 게시판 › 커뮤니티 › Q&A › 좌우 테두리 없는 테이블 만드는 법

2개 답변, 2 voices Last updated by Avatar of woowoo 6 years, 11 months 전
  • Avatar of woowoo
    Participant
    @mandong
    2018/07/31 1:50 오후 #53040

    안녕하세요.

    아래와 같이 좌우 테두리가 없는 테이블을 만들어보고 싶어 여기저기 살펴보았지만 방법을 모르겠네요. border-left(right):hidden  을 적용하면 좌우 테두리뿐만 아니라 셀 경계까지 모두 사라져 버려 사용할 수 없네요.

    Avatar of woo
    woo
    Avatar of oksambarioksambari
    Participant
    @oksambari
    2018/07/31 3:57 오후 #53042

    css 에 다양한 선택자들이 있습니다.

     

    td에서   :first-child와   :last-child 의 border 한쪽을

    display:none 하거나

    border-color 를 백그라운드와 같게 하면 될 거 같네요

     

    또는 구조에 따라 tr에서 좌우 양쪽 스타일을 적용해도 될 거 같고요

     

    기타 다양한 선택자를 이용하셔도 의도대로 표시가 가능할 겁니다~

    https://code.tutsplus.com/ko/tutorials/the-30-css-selectors-you-must-memorize–net-16048

    Avatar of oksambari
    oksambari
    Publishing Homepage [&] Blogging about WP.
    Wordpress를 워드프레스답게!
    Avatar of woowoo
    Participant
    @mandong
    2018/07/31 4:17 오후 #53043

    oksambari 님, 고맙습니다!

    말씀대로 css 에 td:first-child {border-left:hidden;} td:last-child {border-right:hidden;} 를 추가하여 의도한 대로 왼쪽과 오른쪽 테두리만 출력되지 않는 테이블을 꾸밀 수 있었습니다.^^

    친절한 답변 고맙고요, 즐거운 화요일 오후 보내십시오!

    Avatar of woo
    woo
  • Author
    Posts
3 글 보임 - 1에서 3 까지 (총 3 중에서)
  • 답변은 로그인 후 가능합니다.