百分比控制表格列宽，不起效

<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即可解决这个问题