How can I allow a CSS table column with width 100% to overflow table?

Question

I have a CSS table that actually has two columns but one of the columns is hidden by setting it's width to 0 and the second column has width 100% so it takes up the entire table. When the first column is shown (controlled by a checkbox and CSS), the second column resizes but I want it to stay the same size to look like it's content is being pushed to the side. I've been able to get that to work if I give the column an explicit width in pixels but is it possible to get it to work using a percentage width using just 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>

Where do you ever write width: 50% in your css? or whatever percentage... — Mario Nikolaus, Nov 22 '17 at 23:02

DesignMonkeyJim · Answer 1 · 2017-11-22T23:50:30.097

So you could set a min-width on the element, but again this isn't using percentages. The only other way i think you can do this is with a bit of jQuery to get the parent elements width, which you could do inside a resize function.

UPDATE - the first table now uses position absolute on .col2 which is set to 100%, then CSS transition on left

fiddle - https://fiddle.jshell.net/Jim_Miraidev/pa734h2y/

$(document).ready(function(){
  var resizeTimer;
  var $col3 = $('.col3');
 
  $(window).on('resize load', function(e) {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
      // get parent width and set
      var $pw = $col3.parent().width();
   $col3.css({'width':$pw});    
    }, 100);

  });
 
});

#container {
  width: 100%;
  border: 2px solid red;
  position: relative;
  overflow:hidden;
}

.table {
  margin-top: 16px;
  display: table;
  table-layout: fixed;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}
.col {
  display: table-cell;
  overflow: hidden;
}
.col1 {
  width: 0;
  transition: width .5s ease;
}
.col2 {
  position: absolute;
  width: 100%;
  left:0;
  transition: left .5s ease;
}
.col3 {
  position: absolute;
  width: 100%;
}
.marker {
  float: right;
}
input[type="checkbox"]:checked ~ div > div > .col1 {
  width: 100px;
}
input[type="checkbox"]:checked ~ div > div > .col2 {
  left: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="show-col">Show extra col</label>
<input type="checkbox" id="show-col">
<p>Using css transition left width set to 100%</p>
<div id="container">
  <div class="table">
    <span class="col1 col">Column 1</span>
    <span class="col2 col">
      Column 2 - using postion absolute and
      animating the left
      <span class="marker">Edge</span>
    </span>
  </div>
</div>
<p>Using the jQuery</p>
<div id="container">
  <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>

How can I allow a CSS table column with width 100% to overflow table?

1 Answers1

Linked