테이블 테두리 문제를 해결하기 위해 CSS 속성 border-collapse를 사용하는 방법

페이지 레이아웃을 할 때 그림과 텍스트 외에 가장 많이 사용하는 테이블은 많은 사람들에게 테이블의 테두리가 너무 많아서 짜증나는 일입니다. 레이어 테두리가 있는 테이블은 매우 보기 흉합니다. 테이블 테두리 설정 방법을 아시나요? 오늘은 CSS의 border-collapse 속성에 대해 이야기하겠습니다. 이 속성은 매우 실용적이지만 아직 많은 사람들이 이를 모르고 있습니다.

일반적으로 우리는 다음과 같이 테이블을 작성하고, 테이블 테두리와 원하는 스타일을 지정합니다.

HTML 부분: #🎜🎜 #

<table class="aa">
   <thead>
    <tr>
     <th>序号</th>
     <th>姓名</th>
     <th>性别</th>
     <th>年龄</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>1</td>
     <td>张晗</td>
     <td>男</td>
     <td>23</td>
    </tr>
    <tr>
     <td>2</td>
     <td>陆颖</td>
     <td>女</td>
     <td>20</td>
    </tr>
    <tr>
     <td>3</td>
     <td>郝婷婷</td>
     <td>女</td>
     <td>19</td>
    </tr>
   </tbody>
  </table>

CSS 부분:

.aa{border: 1px solid #ccc;width:30%;text-align: center;border-collapse: collapse;}
.aa th,.aa td{border: 1px solid #ccc;padding: 10px;}

보세요, 효과는 다음과 같습니다:

#🎜🎜 #

테이블에 대한 우리의 이해와 일치하지 않습니다. 왜 이렇게 여분의 경계선이 필요한 걸까요? 일반적으로 우리는 바깥쪽 테두리와 공유되는 부분만 필요합니다. 셀마다 테두리가 있을 필요는 없습니다. 그렇다면 이러한 추가 테두리를 제거하는 방법은 무엇입니까? 다음은 오늘의 초점입니다.

CSS 속성의 border-collapse는 불필요한 테두리를 제거하는 데 도움이 됩니다.

먼저 border-collapse 속성값 설명을 살펴보겠습니다. 두 개의 값이 있습니다. 기본 값은 테두리가 분리되어 있고 병합되지 않은 상태입니다. 테두리가 인접해 있으면 이제 이 속성을 테이블에 추가해 보겠습니다.

.aa{border: 1px solid #ccc;width:30%;text-align: center;border-collapse: collapse;}

사진:

보셨나요? border-collapse:collapse를 테이블에 적용하면 테이블 테두리가 병합되어 훨씬 더 아름다워집니다. 이 속성은 향후 작업에서 사용할 수 있으며 매우 유용합니다. 친구들이 직접 시도해 보는 것이 좋습니다. 특히 초보자라면 이 글이 도움이 되기를 바랍니다.

위 내용은 테이블 테두리 문제를 해결하기 위해 CSS 속성 border-collapse를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!