고정 레이아웃 테이블에서 열 크기를 변경할 수 없습니다.

여러 개의 div 컨테이너가있는 html 페이지가 있는데 그 중 하나에는 테이블이 있습니다. 외부 스타일 시트를 사용하고 있는데 무엇을 시도하든 첫 번째 열의 크기를 조정할 수 없습니다.
"table-layout : fixed;"를 설정했습니다. 컬럼에 "width"와 "max-width"를 사용하려고 시도했지만, 아무것도하지 않으면 컬럼의 크기를 다시 조절할 수 있습니다.
누군가이 열의 크기를 조정할 수없는 이유를 지적하실 수 있으십니까?
이 크기 조정을 중지시키는 다른 속성이 작동하지 않습니까? div 컨테이너 중 하나에서 문제가 발생합니까? 고정 레이아웃 테이블에서 열 크기를 변경할 수 없습니다.

https://jsfiddle.net/Shiroslullaby/ahstbwd5/2/

나는 몇 가지 추가 CSS를하지만, 나는 그것이 여기에 문제가 발생하는 작은 기회에서 그대로 모든 것을 떠날거야 호버에 highliting 같은 일을한다.

HTML :

<html> 
<head> 
    <title>Customers</title> 
    <link rel="stylesheet" href="test2.css"> 


</head> 
<body> 
    <div id="header"></div> 
    <div id="container"> 
    <div class="left"> 

    <table class="customertable"> 
<thead>  
<tr> 
<th class="shortcolumn">id</th><th>businessName</th><th>contactName</th> 
<th>contactEmail</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>1</td><td>Microsoft</td><td>Bill Gates</td><td>[email protected]</td> 
</tr> 
<tr> 
<td>2</td><td>Amazon</td><td>Jeff Bezos</td><td>[email protected]</td> 
</tr> 
</tbody> 
</table> 
    </div> 
    <div class="right"><div id="fixedright"></div></div> 
    </div> 
    <div id="footer"></div> 
</body> 
</html>

CSS : 당신이 여기

.customertable { 
table-layout: fixed; 
overflow-x:auto; 
width: 100%; 
word-wrap: break-word; 
} 

.shortcolumn { 
max-width: 10%; 
} 


#container { 
position: relative; 
width: 100% 
} 

div { 
border-radius: 5px; 
} 

#header { 
height: 50px; 
background-color: #F38630; 
margin-bottom: 10px; 
} 

.left { 

width: 75%; 
background-color: #A7DBD8; 
margin-bottom: 10px; 

} 

.right { 
height: 100%; 
width: 25%; 
background-color: #E0E4CC; 
position: absolute; 
top: 0px; 
right: 0px; 
bottom: 0px; 
margin-bottom: 10px; 

} 

#footer { 
    height: 50px; 
    background-color: #69D2E7; 
    clear: both; 
} 

#fixedright { 
height: 50px; 
width: calc(25% - 6px); 
background-color: #FFFFFF; 
position: fixed; 
margin: 1px 1px 1px 1px; 
} 

thead { 
background: #231E5E; 
color: #FFF; 
} 

tbody tr:nth-child(odd) { 
background: #E9F5D7; 

} 

tbody tr:hover { 

background-color: #86C133; 
}

출처

2016-12-03 Shiroslullaby