냐울당 햄버거 메뉴

목차

    반응형

    안녕하세요. 개자이너 씸플레이입니다.

    테이블에 보더를 넣으면 한 줄이 아니라 두 줄로 보일 겁니다.

     

    테두리가 두 줄인 테이블

    위의 이미지처럼 안쪽과 바깥쪽 테두리가 따로 생기는 경우입니다. 여기서 선을 한 줄로 만들어보겠습니다.


    1. 테이블에 테두리 넣기

     

    table{ border:1px solid black; }
    th, td{ border:1px solid black; }

    일단은 두 줄이 생겨도 테두리를 넣어주도록 하겠습니다. 테이블 전체와 th, td 모두 넣어줍니다. 

     

    320x100

    2. border-collapse : collapse

     

    테이블에 속성을 하나 추가해줍니다. border-collapse라는 속성인데 테두리 간격을 설정하는 속성입니다. 여기에 값을 collapse라고 넣어주시면 인접한 테두리는 겹쳐서 나옵니다. 즉, 테두리가 한 줄인 표를 만들 수 있습니다.

    table{ border:1px solid black; border-collapse:collapse; }
    th, td{ border:1px solid black; }

    *꼭 테이블 태그에 속성을 넣어주셔야 합니다!

     

     

    [같이 보면 좋은 글]

    [coding/css] - [css] border-style 종류

    [coding/css] - [css] 모서리 둥글게 하기

    [coding/html] - [html] 을 이용해 테이블 비율 고정 하기

    [coding/css] - [css] tr태그 여백 주기


    그럼 이만.

    총총.

    반응형
    댓글
    위쪽 화살표
    도움이 되었다면 공감(하트)과 댓글을 부탁드려요.
    로딩바