bootstrap 設定表格table 某一列的寬度
阿新 • • 發佈:2019-02-08
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>