<table class="tableContent" style="table-layout: fixed;">
<tr class="userTableLine userTableOne">
<th><span>用户名</span></th>
<th class="createTimeticon"><span>部门</span></th>
<th class="createSpace"><span>角色</span></th>
<th class="createUtilization"><span>创建时间</span></th>
<th class="backupTableRight"><span>最后登录时间</span></th>
<th class="backupTableRight backupTableLeft"><span>状态</span></th>
<th class="backupTableRight backupTableLeft"><span>操作</span></th>
</tr>
<tr class="userTableRow" ng-repeat="userList in userLists track by $index">
<td ui-sref="sidebar.userDetail({id: userList.id, name: userList.userName})" ng-click="getActiveColor_YHZX()" class="backupTableRowTd" title="{{userList.userName}}">
<span class="nameWrap">{{userList.userName}}</span>
</td>
<td title="{{userList.deptName}}"><span>{{userList.deptName}}</span></td>
<td title="{{userList.roleInfo.roleName}}"><span class="roleWrap">{{userList.roleInfo.roleName}}</span></td>
<td title="{{userList.createTime}}" class="backupTableRowLeft">{{userList.createTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
<td title="{{userList.lastLoginTime}}" class="backupTableRowLeft">{{userList.lastLoginTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
<td class="userActive"><span ng-if="(userList.userState == 0)" class="userStatusActive">激活</span><span ng-if="(userList.userState == 1)" class="userStatusHang">挂起</span></td>
<td class="userOperate" ng-if='userList.userName != isCurrent'>
<span ng-show="(userList.userState == 0)">
<span ng-click="activeUser(userList.id, '1');hang={open: true}" class="hang" title="挂起" id='"hang"+ {{userList.id}}'>挂起</span>
</span>
<span ng-show="(userList.userState == 1)">
<span ng-click="activeUser(userList.id, '0');act={open: true}" class="act" title="激活" id='"active"+ {{userList.id}}'>激活</span>
</span>
</td>
</tr>
</table>
通过百分比控制列宽在1366*768下效果不明显,但大屏没又问题,下面是我对每一列的控制
table{width: 100%;}
.userTableLine th span{display: inline;width:100%;height: 100%;}
tr:nth-child(even){background-color: #ffffff;}
tr:nth-child(odd){background-color: #fbfbfb;}
tr th:nth-child(1){width: 13%;}
tr th:nth-child(1) span{display: inline;width:100%;height:100%;overflow: hidden; text-overflow:ellipsis; white-space: nowrap;vertical-align: bottom;}
tr th:nth-child(2){width: 13%;}
tr th:nth-child(2) span{display: inline;width:100%;height:100%;overflow: hidden; text-overflow:ellipsis; white-space: nowrap;vertical-align: bottom;}
tr th:nth-child(3){width: 11%;}
tr th:nth-child(4){width: 16%;}
tr th:nth-child(5){width: 16%;}
tr th:nth-child(6){width: 9%;}
tr th:nth-child(7){width: 24%;}
tr td:nth-child(1){width: 13%;}
tr td:nth-child(1) span{color: #3399e5;display: inline-block;width:80%;overflow: hidden; text-overflow:ellipsis; white-space: nowrap;vertical-align: bottom;}
tr td:nth-child(2){width: 13%;}
tr td:nth-child(2) span{display: inline-block;width:80%;overflow: hidden; text-overflow:ellipsis; white-space: nowrap;vertical-align: bottom;}
tr td:nth-child(3){width: 11%;}
tr td:nth-child(4){width: 18%;}
tr td:nth-child(5){width: 18%;}
tr td:nth-child(6){width: 9%;}
tr td:nth-child(7){width: 24%;}
当第一列内容长度很大的情况时,列宽会自动撑大,导致其他的列会换行,整个样式发生变化
解决方法,通过设置table的table-layout位fixed即可解决这个问题