解决table列宽无法修改问题

修改前

<table  id="major-table"
                    class="table table-bordered  text-center table-striped col-md-12"
                    style="margin-top: 15px; " >
                        <thead>
                            <tr>
                                <th class="text-center " >序号</th>
                                <th class="text-center ">校验条件名</th>
                                <th class="text-center " >描述</th>
                                <th class="text-center" >调用服务</th>
                                <th class="text-center ">有效性</th>
                                <th class="text-center ">操作</th>
                            </tr>
                        </thead>
                        <tbody id="body">

                        </tbody>
                    </table>

由于调用服务内容较长列宽占了几乎所有页面于是进行如下修改：加了宽度设定

//jsp
<table  id="major-table"
                    class="table table-bordered  text-center table-striped col-md-12"
                    style="margin-top: 15px; " >
                        <thead>
                            <tr>
                                <th class="text-center col-md-1" >序号</th>
                                <th class="text-center col-md-2">校验条件名</th>
                                <th class="text-center col-md-2" >描述</th>
                                <th class="text-center col-md-4" >调用服务</th>
                                <th class="text-center col-md-1">有效性</th>
                                <th class="text-center col-md-2">操作</th>
                            </tr>
                        </thead>
                        <tbody id="body">

                        </tbody>
                    </table>
//js
"<td class='text-center col-xs-1' >" +  (i + 1 + (currentPage - 1) * g_pageSize) + "</td>" +  
                "<td class='text-center col-xs-2'>" + format(n.name) + "</td>" +  
                "<td class='text-center col-xs-2'>" + format(n.description) + "</td>" + 
                "<td class='text-center col-xs-4'>" + format(n.invoke) + "</td>"+
                "<td id='val"+n.id+"' class='text-center col-xs-1'>" + formatValid(n.valid) + "</td>" +

依然没有效果
又加上以下内容：

//jsp
<table  id="major-table"
                    class="table table-bordered  text-center table-striped col-md-12"
                    style="margin-top: 15px; table-layout:fixed; " >
                        <thead>
                            <tr>
                                <th class="text-center col-md-1" >序号</th>
                                <th class="text-center col-md-2">校验条件名</th>
                                <th class="text-center col-md-2" >描述</th>
                                <th class="text-center col-md-4" >调用服务</th>
                                <th class="text-center col-md-1">有效性</th>
                                <th class="text-center col-md-2">操作</th>
                            </tr>
                        </thead>
                        <tbody id="body">

                        </tbody>
                    </table>
//js
"<td class='text-center col-xs-1' >" +  (i + 1 + (currentPage - 1) * g_pageSize) + "</td>" +  
                "<td class='text-center col-xs-2'>" + format(n.name) + "</td>" +  
                "<td class='text-center col-xs-2'>" + format(n.description) + "</td>" + 
                "<td class='text-center col-xs-4'style='word-break: break-all; word-wrap:break-word;'>" + format(n.invoke) + "</td>"+
                "<td id='val"+n.id+"' class='text-center col-xs-1'>" + formatValid(n.valid) + "</td>" +

就解决了，如果只加入table-layout:fixed; 会冲破列的边框，再加入style=’word-break: break-all; word-wrap:break-word;’
就好了