입력 태그를 중첩하는 동안 테이블 셀의 증가를 방지하려면 어떻게해야합니까? 조건에 의해

Question

I 둥지 input 태그 :

<td *ngFor="let cell of row.Persons"> 

    <span cell.editable === true "> 
     <input type="number" [(ngModel)]="cell.PersonCount" autofocus /> 
    </span> 

    <span *ngIf="cell.editable === false " (click)="toggle(cell)"> 
     {{ cell.PersonCount ? cell.PersonCount : '-' }} 
    </span> 

</td> 

input 태그없이 테이블 셀 Person의 폭은 다음과 같습니다

I :

및 Person 셀 input 태그가있는 경우 다음 스타일을 설정하려고했지만 결과가 없습니다.

<input type="number" [(ngModel)]="cell.PersonCount" 
     style="display: inline; max-width: 100%; width: inherit; height: 
     inherit; box-sizing: border-box !important; overflow:hidden; 
     -moz-box-sizing: border-box !important; 
     -webkit-box-sizing: border-box !important; border: none;" autofocus /> 

내 질문은 더 input 태그는 (첫 번째 이미지 등)이없는 것처럼이 동일하게 셀의 크기를 유지할 수있는 방법을 입니까?

an example at plunker을 작성했습니다. 참조하십시오.

Answer 1

문제는 입력 자체의 크기입니다. ,

• <input type="text" />

• <input type="text" size="20" />

• <input type="text" size="0" />

어쨌든 : <input> 요소는이 모두 같은 행동을 할 뜻 size 기본값 20에라는 속성을 가지고 문제는 여전히 남아있다. size을 "hardcoded"크기이고 다른 요소와 관련이 없으므로 가장 작은 값 (1)으로 설정하면됩니다.

두 가지 경우 모두 상위 요소 (너의 td)에 너비 (정적 또는 동적)를 설정하고 입력을 width: 100%으로 설정하는 것이 유일한 방법입니다.

내가 어떻게 할 수 있는지에 대한 예로서 약간 plunkr을 조정했습니다.

희망이 있습니다.

P.S : 제가 언급 한 문제는 부트 스트랩 문제입니다. 어쨌든 실제로 너비를 설정하면 문제가됩니다.이 경우 최소 너비를 0으로 설정하여 부트 스트랩 기본값을 무시하십시오.

Answer 2

이 시도 : 귀하의 의견의

<td *ngFor="let cell of row.Persons" style="display: inherit;"> 
    <span *ngIf="cell.editable"> 
     <input type="number" [(ngModel)]="cell.PersonCount" autofocus style="max-width: 50px;"/> 
    </span> 
</td>