I've got an html page that has several div containers, one of which has a table. 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?
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.
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;
}
Here you are... fixed!
https://jsfiddle.net/ahstbwd5/3/
Table cells don't accept max-width, only width...
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments