1. 程式人生 > >bootstrap 設定表格table 某一列的寬度

bootstrap 設定表格table 某一列的寬度

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

bootstrap-table設定colmuns中某列的寬度無效時,需要給整個表設定css屬性

123.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>