bootstrap 设置表格table 某一列的宽度

https://www.cnblogs.com/lhyhappy65/p/6422635.html


bootstrap-table设置colmuns中某列的宽度无效时,需要给整个表设置css属性

1
2
3
.table{
    table-layout: fixed;
}


global.css

/*table的内容样式*/
.table-content{
  word-wrap:break-word;
  table-layout:fixed;

}
.table-content-hidden{
  word-wrap:break-word;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  -o-text-overflow:ellipsis;
  -moz-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
}


<table id="table" class="table table-striped table-hover table-content">
   <thead>
   <tr>
      <th>回答ID</th>
      <th style="width: 200px">回答内容</th>
      <th>用户ID</th>
      <th style="width: 80px">用户昵称</th>
      <th>问题ID</th>
      <th style="width: 200px">问题标题</th>
      <th id="agreeOrder" class="th-order">点赞数<span class="order">排序</span></th>
      <th id="commentOrder" class="th-order">评论数<span class="order">排序</span></th>
      <th>状态</th>
      <th style="width: 150px">更新时间</th>
      <th style="width: 150px">创建时间</th>
      <th class="table-manage" style="width: 80px">管理</th>
   </tr>
   </thead>
   <tbody id="pageContent"></tbody>
   <tfoot>
   <tr>
      <td colspan="6">
         <div id="pagination" class="pagination"></div>
      </td>
   </tr>
   </tfoot>
</table>


<script type="text/x-jquery-tmpl" id="pageTmpl">
<tr>
   <td>${id}</td>
   <td class="content table-content-hidden">${content}</td>
   <td>${user_id}</td>
   <td class="table-content-hidden">${nick}</td>
   <td>${problem_id}</td>
   <td class="table-content-hidden">${title}</td>
   <td><a href="javascript:void(0);" class="agree_num">${agree_num}</a></td>
   <td><a href="javascript:void(0);" class="comment_num">${comment_num}</a></td>
   <td>{{if status == 0}}不可用 {{else status == 1}}可用{{/if}}</td>
   <td>${Util.formatDateTime(updated)}</td>
   <td>${Util.formatDateTime(created)}</td>
   <td class="table-update">
       <a href="javascript:void(0);" class="table-edit-btn">
         <button type="button" class="btn btn-default btn-sm btn-edit">
         <span class="glyphicon glyphicon-edit"></span> 编辑
         </button>
      </a>
   </td>
</tr>
</script>

猜你喜欢

转载自blog.csdn.net/zgpeterliu/article/details/80511988