No-Wrap Column to use only space available

June 21, 2022

My scenario is I have a column that may or may not be the last column in a table, and I want it to use the horizontal space available but shrink as needed to make room for new columns.

Below is intended to demonstrate the current behavior. I’m looking for a CSS solution that provides the described desired behavior.

        function AddColumn() {
            let body = document.getElementById("body");
            let head = document.getElementById("headRow")
            let row1 = document.getElementById("row1");
            let el = document.createElement("td");
            let cols = head.childElementCount + 1;
            el.className = "fixedCol";
            head.append(el);
            el.textContent = "Column " + cols;
            el = document.createElement("td");
            el.className = "fixedCol";
            row1.append(el);
        }

        .variCol {
            position: relative;
            width: 99%;
            overflow: hidden;
            white-space: nowrap;
            vertical-align: top;
            background-color: yellow;
        }
        .fixedCol{
            position:relative;
            width:150px;
            white-space:nowrap;
            overflow:hidden;
        }
        table{
            position:relative;
            width:700px;
            max-width:100%;
            height:200px;
            border:1px solid black;

        }
        #myButton{
            background-color:lightgray;
            cursor:pointer;

        }
        #tableContainer{
            position:relative;
            width:700px;
            height:300px;
            border:1px solid black;
        }

    <div id="tableContainer">
        <table id="table">
            <thead>
                <tr id="headRow">
                    <td class="fixedCol">Column 1</td>
                    <td class="variCol">Variable Width Column: Use available</td>
                </tr>
            </thead>
            <tbody id="body">
                <tr id="row1">
                    <td class="fixedCol">Current Behavior</td>
                    <td class="variCol">table width expands beyond container </td>
                </tr>
                <tr id="row1">
                    <td class="fixedCol">Desired Behavior</td>
                    <td class="variCol">Width of this column to shrink to make room for new columns </td>
                </tr>
            </tbody>
        </table>

    </div>
    <span id="myButton" onclick="AddColumn()">Add Column</span>

>Solution :

Based on your comments to the answer, you need to change width: 99% to max-width: (some value)px/rem/em

I’ve added text-overflow: ellipsis

Note: don’t use inline event listeners

function AddColumn() {
  const body = document.getElementById("body");
  const head = document.getElementById("headRow")
  const row1 = document.getElementById("row1");
  let el = document.createElement("td");
  const cols = head.childElementCount + 1;
  el.className = "fixedCol";
  head.append(el);
  el.textContent = "Column " + cols;
  el = document.createElement("td");
  el.className = "fixedCol";
  row1.append(el);
}

document.getElementById("myButton").addEventListener('click', AddColumn)

.variCol {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
  vertical-align: top;
  background-color: yellow;
}

.fixedCol {
  position: relative;
  width: 150px;
}

table {
  position: relative;
  width: 700px;
  max-width: 100%;
  height: 200px;
  border: 1px solid black;
}

#myButton {
  background-color: lightgray;
  cursor: pointer;
}

#tableContainer {
  position: relative;
  width: 700px;
  height: 300px;
  border: 1px solid black;
}

<div id="tableContainer">
  <table id="table">
    <thead>
      <tr id="headRow">
        <td class="fixedCol">Column 1</td>
        <td class="variCol">Variable Width Column: Use available</td>
      </tr>
    </thead>
    <tbody id="body">
      <tr id="row1">
        <td class="fixedCol">Current Behavior</td>
        <td class="variCol">table width expands beyond container </td>
      </tr>
      <tr id="row1">
        <td class="fixedCol">Desired Behavior</td>
        <td class="variCol">Width of this column to shrink to make room for new columns </td>
      </tr>
    </tbody>
  </table>

</div>
<span id="myButton">Add Column</span>