為什么輸入會影響表格單元格的寬度，使它們都相等？

有一個表格，table-layout: auto;每一列都可以有一個輸入來過濾它的內容，這些過濾器是可選的，所以有一個隱藏它們的功能。

問題是 - 每次用戶顯示/隱藏表格的輸入布局時都會發生變化，這很煩人。通常表格足夠寬以適應輸入，因此即使輸入的寬度非常小，為什么布局也會發生變化是沒有意義的。

顯示代碼片段

const input_row = document.getElementById('input_row');
const toggle_btn = document.getElementById('toggle_btn');
let shown = true;
toggle_btn.onclick = function toggle() {
  if (shown) {
    input_row.removeAttribute('hidden')
  } else {
    input_row.setAttribute('hidden', '');
  }
  shown = !shown
}

table * {
  border: 1px solid gray;
}

table {
  width: 700px;
  table-layout: auto;
}

input {
  min-width: 0px;
  width: 10%;
}

<button id="toggle_btn">
  Show/hide inputs
</button>
<p/>
<table>
  <thead>
    <tr>
      <th> Full Name </th>
      <th> Phone </th>
      <th> Id</th>
    </tr>
    <tr id="input_row" hidden>
      <th>
        <input>
      </th>
      <th>
        <input>
      </th>
      <th>
        <input>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem, ipsum</td>
      <td> 1 463 123 444</td>
      <td>13 </td>
    </tr>
    <tr>
      <td>Eaque iure</td>
      <td> 1 999 00 22 333</td>
      <td>37</td>
    </tr>
  </tbody>
</table>

提供輸入position:absolute;會阻止它們影響布局，但會引入它自己的一系列問題。

理想情況下，每列都將保持輸入隱藏時的寬度，并且輸入將填充可用空間。有沒有辦法在不使用 JavaScript 控制寬度的情況下做到這一點？

我也不明白為什么會這樣，所以如果你能解釋一下就好了。

編輯：這是一個必須是動態的表格組件，它的內容和列可能會有所不同，因此無法設定特定的寬度。

uj5u.com熱心網友回復：

根據這個答案，您必須對元素使用size屬性。input此外，當必須隱藏行時hidden，您必須使用設定了屬性的 CSS 類，而不是使用屬性。visibility: collapse

顯示代碼片段

const input_row = document.getElementById('input_row');
const toggle_btn = document.getElementById('toggle_btn');
let shown = true;
toggle_btn.onclick = function toggle() {
  if (shown) {
    input_row.classList.remove('hidden')
  } else {
    input_row.classList.add('hidden');
  }
  shown = !shown
}

table * {
  border: 1px solid gray;
}

table {
  width: 700px;
  table-layout: auto;
}

input {
  min-width: 0px;
  width: 10%;
  display: inline-block;
}

.hidden {
  visibility: collapse;
}

<button id="toggle_btn">
  Show/hide inputs
</button>
<p/>
<table>
  <thead>
    <tr>
      <th> Full Name </th>
      <th> Phone </th>
      <th> Id</th>
    </tr>
    <tr id="input_row" class="hidden">
      <th>
        <input size="1" />
      </th>
      <th>
        <input size="1" />
      </th>
      <th>
        <input size="1" />
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem, ipsum</td>
      <td> 1 463 123 444</td>
      <td>13 </td>
    </tr>
    <tr>
      <td>Eaque iure</td>
      <td> 1 999 00 22 333</td>
      <td>37</td>
    </tr>
  </tbody>
</table>

uj5u.com熱心網友回復：

您可以嘗試類似的方法，但不確定您的意思

顯示代碼片段

const input_row = document.getElementById('input_row');
const toggle_btn = document.getElementById('toggle_btn');
let shown = true;
toggle_btn.onclick = function toggle() {
  if (shown) {
    input_row.removeAttribute('hidden')
  } else {
    input_row.setAttribute('hidden', '');
  }
  shown = !shown
}

table * {
  border: 1px solid gray;
}

table {
  width: 700px;
  table-layout: auto;
}
th{
min-width : 100px;

}
input {
  min-width: 10px;
  max-width: 90px;
}

<button id="toggle_btn">
  Show/hide inputs
</button>
<p/>
<table>
  <thead>
    <tr>
      <th> Full Name </th>
      <th> Phone </th>
      <th> Id</th>
    </tr>
    <tr id="input_row" hidden>
      <th>
        <input>
      </th>
      <th>
        <input>
      </th>
      <th>
        <input>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem, ipsum</td>
      <td> 1 463 123 444</td>
      <td>13 </td>
    </tr>
    <tr>
      <td>Eaque iure</td>
      <td> 1 999 00 22 333</td>
      <td>37</td>
    </tr>
  </tbody>
</table>

標籤：html css

上一篇：如何在相對定位的div中間定位絕對div

下一篇：我們如何使用css水平對齊文本？