IBSheet8의 편집 가능 여부는 CanEdit 속성을 통해 설정되며, 화면에서 배경색을 통해 구분됩니다.



편집이 불가능한 셀(Cell)은 main.css 파일에 .IBColorReadOnly 클래스에서 설정한 배경색을 갖게 됩니다.

  .IBColorReadOnly{background-color:#f4f4f4}

편집이 가능한 셀에는  .IBClassEdit 클래스가 적용됩니다.

따라서 위 class를 이용하여 편집 가능한 셀(Cell)에 대해 별도의 디자인을 적용할 수 있습니다.


1. 편집 가능한 셀에 대해 테두리를 표시


.IBClassEdit{
  position:relative;
}
td.IBClassEdit.IBText::after{
  content:"";
  position:absolute;
  top:2px;
  bottom:2px;
  left:2px;
  right:2px;
  border-right:1px solid #666;
  border-top:1px solid #666;
  border-bottom:1px solid #666;
  border-left:1px solid #666;
  border-radius: 2px;
}

td.IBClassEdit.IBLines::after{
  content:"";
  position:absolute;
  top:2px;
  bottom:2px;
  left:2px;
  right:2px;
  border:1px solid #666;
  border-radius: 2px;
}
td.IBClassEdit.IBLines::after{
  content:"";
  position:absolute;
  top:2px;
  bottom:2px;
  left:2px;
  right:2px;
  border:1px solid #666;
  border-radius: 2px;
}
td.IBClassEdit.IBEnum::after{
  content:"";
  position:absolute;
  top:2px;
  bottom:2px;
  left:2px;
  right:2px;
  border:1px solid #666;
  border-radius: 2px;
}
td.IBClassEdit.IBInt::after{
  content:"";
  position:absolute;
  top:2px;
  bottom:2px;
  left:2px;
  right:2px;
  border:1px solid #666;
  border-radius: 2px;
}
td.IBClassEdit.IBFloat::after{
  content:"";
  position:absolute;
  top:2px;
  bottom:2px;
  left:2px;
  right:2px;
  border:1px solid #666;
  border-radius: 2px;
}

td.IBClassEdit.IBNoRight:not(.IBTree)::after{
  content:"";
  position:absolute;
  top:2px;
  bottom:2px;
  left:2px;
  right:0px;
  /* border:1px solid #666; */
  border-right:0px solid #666;
  border-top:1px solid #666;
  border-bottom:1px solid #666;
  border-left:1px solid #666;
  border-radius:2px 0 0 2px;
}
td.IBClassEdit+.IBNoLeft::after{
  content:"";
  position:absolute;
  top:2px;
  bottom:2px;
  left:0px;
  right:2px;
  /* border:1px solid #666; */
  border-right:1px solid #666;
  border-top:1px solid #666;
  border-bottom:1px solid #666;
  /* border-left:1px solid #666; */
  border-radius:0 2px 2px 0;
}


td.IBClassEdit.IBPass::after{
  content:"";
  position:absolute;
  top:2px;
  bottom:2px;
  left:2px;
  right:2px;
  border:1px solid #666;
  border-radius: 2px;
}

td.IBTree::after{
  border:0 solid #FFFFFF;
}


예제


참고. 해당 디자인은 Chrome,Edge 에서만 사용 가능.(IE 불가)



2. 편집 가능한 셀(Cell)에 대해 우측 리본을 표시


 .IBClassEdit{
  position:relative;
}
.IBClassEdit:hover:after {
opacity: 1;
}
.IBClassEdit:after {
  position: absolute;
  content: '';
  width: 0;
  right: 0;
  top: -10px;
  border: 10px solid transparent;
  border-right: 10px solid #F76E11;
  opacity: 0.5;
}

.IBNoRight:after{
  border: 0px;
}



예제2