HTML 테이블의 테두리 선을 겹치고 싶습니다 (border-collapse)

1706 단어 HTML테이블

border-collapse란?



테이블 셀에서 인접한 경계선을 겹쳐서 표시하려면 border-collapse 속성을 사용합니다. 이 프로퍼티는 디폴트가 아니기 때문에, 각각으로 설정할 필요가 있다.

이하의 값으로 지정한다.

collapse
인접한 보더 라인을 겹쳐서 표시.
separate(초기값)
인접한 경계선을 놓고 표시.

Example


  • border-collapse 속성을 설정한 경우의 외형( border-collapse: collapse; )
  • border-collapse 속성을 설정하지 않는 경우의 외형

    • 적절하게 HTML 파일을 만들고 복사하고 열어 확인하십시오.
    <!DOCTYPE html>
<html lang="ja">
    <style>
        table {
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #333;
        }
    </style>
    <body>
        <table>
            <tr>
              <th>果物</th> <th>味</th>
            </tr>
            <tr>
              <td>いちご</td> <td>甘い</td>
            </tr>
            <tr>
              <td>レモン</td> <td>酸っぱい</td>
            </tr>
          </table>
    </body>
</html>

    참고로 한 사이트


  • HTML 표
  • border-collapse
    • CSS만 사용하여 요소 위로 마우스를 가져가면 콘텐츠를 표시하는 3가지 방법
    Flutter Riverpod를 Socket.io와 함께 사용하는 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage