편집 가능한 테이블을 수행하는 방법

Question

내가했다 필드가 난 후 나머지 필드 줬음 밖으로 이동되는 필드를 편집

아래 스크린 샷을 넣을 때 editable.The 문제가되는 테이블

아무도 도움을 제안 할 수 있습니까?

내 HTML을

<table class="table table-hover"> 
      <thead> 
       <tr> 
       <th class="hidden-xs-down">#</th> 
       <th>Account Name</th> 
       <th class="hidden-xs-down">Phone</th> 
       <th class="hidden-xs-down">Account Name ALias</th> 
       <th></th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr *ngFor = 'let student of students'> 
       <td class="hidden-xs-down">1</td> 
       <td contenteditable="true"> 
        <a>{{student.accountname}}</a> 
       </td> 
       <td contenteditable="true" style="max-width:300px;" class ='phone'> 
        {{student.phone}} 
       </td><i class = 'glyphicon glyphicon-pencil'></i> 
       <td contenteditable="true"> 
        {{student.accountownername}} 
       </td> 
       <td> 

       </tr> 

      </tbody> 
     </table> 

Answer 1

당신은 직접 TD 요소에 최대 폭을 설정할 수 없습니다. 당신은 폭을 설정하거나 어쩌면로 문자열을자를 수 : 정말

.truncate { 
     width: 300px; 
     white-space: nowrap; 
     overflow: hidden; 
     text-overflow: ellipsis; 
    }