无法更改固定布局表中的列大小答案

【问题标题】：Unable to change column size in fixed layout table无法更改固定布局表中的列大小
【发布时间】：2017-04-18 14:25:49
【问题描述】：

我有一个 html 页面，其中有几个 div 容器，其中一个有一个表格。我正在使用外部样式表，无论我尝试什么，我都无法调整第一列的大小。
我设置了“表格布局：固定；”并尝试在列上使用“宽度”和“最大宽度”，但我所做的任何事情都不会让我重新调整列的大小。
希望有人能指出为什么无法调整此列的大小？
是否有其他属性阻止此调整大小起作用？其中一个 div 容器是否会在此处引起问题？

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

我有一些额外的 CSS，但它会在悬停时进行高亮显示，我会保留所有内容，因为它在这里引起问题的可能性很小。

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>Bill@Microsoft.com</td>
</tr>
<tr>
<td>2</td><td>Amazon</td><td>Jeff Bezos</td><td>Jeff@Amazon.com</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;
}

【问题讨论】：

标签： html css html-table tablelayout

【解决方案1】：

你在这里……修好了！

https://jsfiddle.net/ahstbwd5/3/

表格单元格不接受max-width，只接受width...

【讨论】：

是的，它正在工作！在进行其他一些更改之前，我曾尝试使用“宽度”，但它不起作用。也许我还没有设置 table-layout: fixed 属性...
是的，可能您没有尝试正确组合 table-layout:fixed 和 width。很高兴我能帮上忙！