replicate 테이블 셀 속성

Question

테이블에 생성중인 TD 태그의 스팬이 필요합니다.

td를 스팬 채우기 위해 폭과 높이가 100 % 인 인라인 블록으로 정의했습니다. 그러나 마지막 셀에서 del 키를 누르기 시작하면 테이블 외부에서 내용이 삭제되기 시작합니다.

스팬을 디스플레이로 정의하면이 문제를 방지하는 표 셀이 있지만 상위 항목을 채우는 데 문제가 있습니다. 삭제되는 다른 콘텐츠를 중지 할 때 범위가 필요합니다.

CSS 속성을 추가하면 해당 컨테이너 내부에서만 적용되는 삭제와 관련하여 표 셀처럼 작동하는 클래스에 추가 할 수 있습니까?

<div contenteditable ="true"> 

<table contenteidtable ="false" class="a"> 
    <tbody contenteditable="false"> 
    <tr contenteditable="false"> 
     <td contenteditable="false"> 
     <span contenteditable = "true">1</span> 
     </td> 
     <td contenteditable="false"> 
     <span contenteditable = "true">2</span> 
     </td> 
     <td contenteditable="false"> 
     <span contenteditable = "true">3</span> 
     </td> 
    </tr> 
    <tr contenteditable="false"> 
     <td contenteditable="false"> 
     <span contenteditable = "true">4</span> 
     </td> 
     <td contenteditable="false"> 
     <span contenteditable = "true">5</span> 
     </td> 
     <td contenteditable="false"> 
     <span contenteditable = "true">6</span> 
     </td> 
    </tr> 
    <tr contenteditable="false"> 
     <td contenteditable="false"> 
     <span contenteditable = "true">7</span> 
     </td> 
     <td contenteditable="false"> 
     <span contenteditable = "true">8</span> 
     </td> 
     <td contenteditable="false"> 
     <span contenteditable = "true">9</span> 
     </td> 
    </tr> 
    </tbody> 
</table> 
<p> 
Some text here 
</p> 
<br /> 
<br /> 
<table contenteidtable ="false" class="b"> 
    <tbody contenteditable="false"> 
    <tr contenteditable="false"> 
     <td contenteditable="false"> 
     <span contenteditable = "true">1</span> 
     </td> 
     <td contenteditable="false"> 
     <span contenteditable = "true">2</span> 
     </td> 
     <td contenteditable="false"> 
     <span contenteditable = "true">3</span> 
     </td> 
    </tr> 
    <tr contenteditable="false"> 
     <td contenteditable="false"> 
     <span contenteditable = "true">4</span> 
     </td> 
     <td contenteditable="false"> 
     <span contenteditable = "true">5</span> 
     </td> 
     <td contenteditable="false"> 
     <span contenteditable = "true">6</span> 
     </td> 
    </tr> 
    <tr contenteditable="false"> 
     <td contenteditable="false"> 
     <span contenteditable = "true">7</span> 
     </td> 
     <td contenteditable="false"> 
     <span contenteditable = "true">8</span> 
     </td> 
     <td contenteditable="false"> 
     <span contenteditable = "true">9</span> 
     </td> 
    </tr> 
    </tbody> 
</table> 
<p> 
Some text here 
</p> 
</div> 



    table { 
    table-layout:fixed; 
} 

table, 
/*table.gsm-i-tbl > tbody > tr > th,*/ 
tabl > tbody > tr > td{ 
    border: 1px dashed lightgrey; 
    border-collapse: separate !important; 
    border-spacing: 2px !important; 
} 

/*table.gsm-i-tbl > tbody > tr > th,*/ 
table > tbody > tr > td { 
    word-wrap: break-word; 
    white-space: pre; 
    padding: 0px !important; 
    margin: 0px !important; 
    overflow-wrap: break-word; 
} 

table tr td { 
    border: 1px dashed lightgrey; 
    background-color: transparent; 
} 

table { 
    height: 300px; 
    width: 300px; 
} 

table.a > tbody > tr > td > span { 
    width: 100% !important; 
    height: 100% !important; 
    display: table-cell; 
    word-wrap: break-word; 
    white-space: pre-wrap; 
    overflow-wrap: break-word; 
    padding: 0px !important; 
    margin: 0px !important; 
    background-color: coral !important; 
    border: none !important; 
    outline: none !important; 
} 

table.b > tbody > tr > td > span { 
    width: 100% !important; 
    height: 100% !important; 
    display: inline-block; 
    word-wrap: break-word; 
    white-space: pre-wrap; 
    overflow-wrap: break-word; 
    padding: 0px !important; 
    margin: 0px !important; 
    background-color: coral !important; 
    border: none !important; 
    outline: none !important; 
} 

https://jsfiddle.net/wuo24jns/29/

상기 jsfiddle가 2 개 테이블을 갖는다. 테이블 간의 유일한 차이점은 첫 번째 테이블에는 표시 유형이 table-cell이고 두 번째 테이블이 인라인 블록으로 표시된다는 것입니다.

첫 번째 표가 9 인 경우 셀을 클릭하고 삭제를 몇 번 누르면 해당 셀의 내용 만 삭제되지만 (올바른 경우)이 범위는이 기간의 TD를 채우지 않습니다.

두 번째 테이블에서 스팬이 각 TD를 채우지 만 두 번째 테이블에서 셀 9를 클릭하고 삭제 키를 누르면 표의 바깥에있는 "some text here"내용을 빨아 들이고 삭제를 시작합니다 그.

Answer 1

이 내용이 완전히 다루어 지는지는 확실하지 않지만 시작일 수 있습니다. 바이올린에서 테이블 b의 스타일을 html로 옮기고 '범위 지정'을 추가했습니다. http://blog.frankmtaylor.com/2013/03/18/contenteditable-css-scoped-and-advanced-in-browser-editing/

나에게 또 다른 새로운 하나 :

<style scoped> 
    table.b > tbody > tr > td > span { 
     width: 100% !important; 
     height: 100% !important; 
     display: inline-block; 
     word-wrap: break-word; 
     white-space: pre-wrap; 
     overflow-wrap: break-word; 
     padding: 0px !important; 
     margin: 0px !important; 
     background-color: coral !important; 
     border: none !important; 
     outline: none !important; 
    } 
</style> 

은이 문서를 참조하십시오. 희망이 도움이됩니다.

Answer 2

나는 그것을 얻었습니다. 전체 내용은 <div contenteditable ="true">에 싸여 있습니다. 모든 자손은 그것을 상속받습니다. 해당 div 외부에서 마지막으로 <p>을 이동하십시오.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable

는 "이 속성을 설정하지 않으면 기본 값은 부모 요소로부터 상속됩니다."