HTML DOM 스타일 borderCollapse 속성

<시간/>

borderCollapse 속성은

요소가 경계를 공유해야 하는지 아니면 분리되어야 하는지를 설정하거나 반환하는 데 사용됩니다. 분리 및 축소의 두 가지 값을 사용할 수 있습니다.

구문

다음은 −

의 구문입니다.

borderCollapse 속성 설정하기 -

object.style.borderCollapse = "separate|collapse|initial|inherit"

값

속성 값은 다음과 같이 설명됩니다 -

Sr.No	가치 및 설명
1	분리 이것은 기본값이며 각 테이블 셀에 별도의 테두리가 있습니다.
2	접기 이것은 테이블 셀 값 사이에 그려지지 않는 테두리를 지정합니다.
3	초기 이 속성을 초기 값으로 설정합니다.
4	상속 상위 속성 값을 상속하려면

예시

borderCollapse 속성의 예를 살펴보겠습니다 -

<!DOCTYPE html>
<html>
<head>
<style>
   div {
      display: flex;
      float: left;
   }
   table {
      border: 3px solid black;
   }
   td {
      border: 3px solid lightgreen;
   }
   th {
      border: 3px solid lightblue;
   }
</style>
<script>
   function collapseBorder(){
      document.getElementById("t1").style.borderCollapse="collapse";
      document.getElementById("Sample").innerHTML="The table borders are now collapsed";
   }
</script>
</head>
<body>
<table id="t1">
<tr>
<th>FRUITS</th>
<th>PRICE </th>
</tr>
<tr>
<td>MANGO </td>
<td>40</td>
</tr>
<tr>
<td>APPLE</td>
<td>50</td>
</tr>
</table>
<p>Collapse the above table borders by clicking the below button</p>
<button onclick="collapseBorder()">COLLAPSE BORDER</button>
<p id="Sample"></p>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 스타일 borderCollapse 속성

COLLAPSE BORDER 버튼을 클릭하면 -

HTML DOM 스타일 borderCollapse 속성