No-WrapColumn僅使用可用空間

我的場景是我有一列可能是也可能不是表中的最后一列，我希望它使用可用的水平空間，但根據需要縮小以為新列騰出空間。

下面旨在演示當前的行為。我正在尋找提供所描述的所需行為的 CSS 解決方案。

        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>
    

uj5u.com熱心網友回復：

根據您對答案的評論，您需要更改width: 99%為max-width: (some value)px/rem/em

我已經添加text-overflow: ellipsis

注意：不要使用行內事件監聽器

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>

標籤：javascript html css html表

上一篇：檢查確切的字串是否在“innerHTML”內

下一篇：改進回圈和任務以抓取我需要匹配值的多個路徑