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>