編集可能なテーブルに行う方法を

Question

私持っていたフィールドは、私はその後、残りのフィールドはtable.Iの外に移動されているフィールドを編集

以下のスクリーンショットを置くとき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; 
    }