如何获得可编辑的表格

时间:2016-10-31 05:24:14

标签: jquery html css twitter-bootstrap

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

最初,

enter image description here

当我尝试编辑时, enter image description here

我的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>

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

1 个答案:

答案 0 :(得分:0)

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

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

th {
    width:150px;
}

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

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