無法更改固定佈局表中的列大小

我有一個有多個div容器的HTML頁面，其中一個容器有一個表格。我正在使用外部樣式表，無論我嘗試什麼，我都無法獲取第一列來調整大小。
我已經設置了「table-layout：fixed;」並試圖在列上使用「寬度」和「最大寬度」，但我不會讓我重新調整列的大小。
希望有人能指出爲什麼不可能調整這一欄的大小？
是否有其他一些屬性阻止這個工作調整大小？其中一個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