I am faced with a CSS table dilemma where I have two columns, but one of them is hidden by setting its width to 0. The second column takes up the entire table by being set to a width of 100%. However, when the first column is shown (controlled by a checkbox and CSS), the second column resizes instead of staying the same size and appearing like its content is being pushed to the side. I was able to achieve the desired effect by giving the column an explicit width in pixels, but I am wondering if it is possible to accomplish this using a percentage width solely through CSS.
#container {
width: 400px;
border: 2px solid red;
}
.table {
margin-top: 16px;
display: table;
table-layout: fixed;
width: 100%;
white-space: nowrap;
overflow: hidden;
}
.col {
display: table-cell;
overflow: hidden;
}
.col1 {
width: 0;
transition: width .5s ease;
}
.col2 {
width: 100%;
width: px;
position: relative;
}
.col3 {
width: 400px;
position: relative;
}
.marker {
position: absolute;
right: 2px;
top: 0;
}
input[type="checkbox"]:checked ~ div > div > .col1 {
width: 100px;
}<label for="show-col">Show extra col</label>
<input type="checkbox" id="show-col">
<div id="container">
<div class="table">
<span class="col1 col">Column 1</span>
<span class="col2 col">
Column 2 - with width as 100%
<span class="marker">Edge</span>
</span>
</div>
<div class="table">
<span class="col1 col">Column 1</span>
<span class="col3 col">
Column 2 - with explicit width in pixels
<span class="marker">Edge</span>
</span>
</div>
</div>