Question

最近我尝试使用可编辑的表格，但是当我编辑一个列时，整个表格结构正在生效，我将其显示为屏幕截图。

最初，

当我尝试编辑时，

我的HTML，

  <div class="widget-body">
        <table class="table table-hover">
           <thead>
              <tr>
                 <th class="hidden-xs-down">#</th>
                <th> <a (click)='getstudents(1)'>Account Name</a></th>
                <th class="hidden-xs-down"> <a (click)='getstudents(1)'>Phone</a></th>
                <th class="hidden-xs-down"> <a (click)='getstudents(1)'>Account Name ALias</a></th>
                 <th></th>
              </tr>
           </thead>
           <tbody>
              <tr *ngFor = 'let student of students'>
                 <td class="hidden-xs-down">{{id}}</td>
                 <td contenteditable="true">
                    <a>{{student.accountname}}</a>
                 </td>
                 <td contenteditable="true"  class ='phone'>
                    {{student.phone}}   
                 </td><i class = 'glyphicon glyphicon-pencil'></i>
                 <td contenteditable="true">
                    {{student.accountownername}}
                 </td>
                 <td>
                    <div class="btn-group" dropdown>
                       <button id="dropdown-btn-one" class="btn btn-xs" dropdownToggle>
                       <i class="fa fa-caret-down"></i>
                       </button>
                       <ul class="dropdown-menu dropdown-menu-right" dropdownMenu role="menu" aria-labelledby="dropdown-btn-one">
                          <li role="menuitem"><a class="dropdown-item pull-left"  (click) = 'getstudentbyid(student._id)'  data-toggle="modal" data-target="#editmodel">Edit</a></li>
                          <li role="menuitem"><a class="dropdown-item" (click) = 'deletestudentbyid(student._id)'>Delete</a></li>
                       </ul>
                    </div>
                 </td>
              </tr>

           </tbody>
        </table>

有人可以建议帮助。谢谢。

Answer 1

一种方法是提供标题宽度，以及可编辑的表格单元格word-break: break-all：

编辑：为TD添加了宽度。在没有它的情况下在Chrome中获得不同的结果。

th {
    width:150px;
}

td {
  width: 150px;
  word-break: break-all;
}

http://jsbin.com/pejopadaju/edit?html,css,output

如何获得可编辑的表格

1 个答案: