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

Question

I've got an html page that has several div containers, one of which has a table. 我有一个html页面，其中包含多个div容器，其中一个具有表。 I'm using an external style sheet, and no matter what I try, I can't get the first column to resize. 我正在使用外部样式表，无论我做什么，我都无法调整第一列的大小。
I've set "table-layout: fixed;" 我设置了“表布局：固定”； and attempted to use "width" and "max-width" on the column, but nothing I do will let me re-size the column. 并尝试在列上使用“宽度”和“最大宽度”，但是我没有做任何事情可以让我重新调整列的大小。
Hoping someone can point out why its not possible to resize this column? 希望有人指出为什么无法调整此列的大小？
Is some other attribute stopping this resize from working? 是否有其他一些属性阻止此调整大小起作用？ Does one of the div containers cause a problem here? div容器之一在这里引起问题吗？

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

I have some extra CSS but that does things like highliting on hover, I'm leaving everything intact in the small chance that its causing an issue here. 我有一些额外的CSS，但是这样做的功能就像悬停时高亮显示一样，我会将所有内容保持原样，以免在这里引起问题。

HTML: 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: 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;
}

Answer 1

Here you are... fixed! 固定在这里！

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

Table cells don't accept max-width , only width ... 表格单元格不接受max-width ，仅接受width ...

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-12-03 22:33:23

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-12-03 22:33:23

解决方案1
1 已采纳 2016-12-03 22:33:23