Question

我有一个动态宽度的表，每个列都是该宽度的动态部分，具体取决于单元格内容。

在该表的标题中，我将输入设置为100％宽度，最初是隐藏的。触发时，将显示输入。不幸的是，如果列的单元格内容非常窄，则会重新计算列宽并跳过宽度。

如何将输入设置为仅填充单元格的宽度＆amp;不要把它推得更宽？

我不相信有解决方案，但我认为在放弃之前我会问更大的社区。我的猜测是我不能没有硬编码宽度，但这是不可能的。

编辑： 我的解决方案是让浏览器进行单元格宽度计算，然后使用Javascript，将列宽显式设置为计算的值。这允许单元格内容确定宽度，但我仍然得到设置宽度行为。

＆＃13;

function toggleInput(){
  var target = document.querySelector('.hidden')
  var newStyle = (target.style.display == 'block') ? 'none' : 'block';
  document.querySelector('.hidden').style.display = newStyle;
}

document.querySelector('th').addEventListener('click',toggleInput);

＆＃13;

table,td,th{
  border:1px solid red;
}
*{
  box-sizing:border-box;
}

table,
input{
  width:100%;
}

.hidden{
  display:none;
}

＆＃13;

<table>
  <thead>
    <tr>
      <th>
        Click me
        <div class="hidden">
          <input />
        </div>
      </th>
      <th>
      </th>
      <th>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Blah
      </td>
      <td>
        Some longer text to stretch
      </td>
      <td>
        More text
      </td>
  </tbody>
</table>

＆＃13;

Answer 1

使用以下CSS：

table { table-layout:fixed }

您的代码包含修复程序：

function toggleInput(){
  var target = document.querySelector('.hidden')
  var newStyle = (target.style.display == 'block') ? 'none' : 'block';
  document.querySelector('.hidden').style.display = newStyle;
}

document.querySelector('th').addEventListener('click',toggleInput);

table,td,th{
  border:1px solid red;
}
*{
  box-sizing:border-box;
}

table,
input{
  width:100%;
}

table { table-layout:fixed; }

.hidden{
  display:none;
}

<table>
  <thead>
    <tr>
      <th>
        Click me
        <div class="hidden">
          <input />
        </div>
      </th>
      <th>
      </th>
      <th>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Blah
      </td>
      <td>
        Some longer text to stretch
      </td>
      <td>
        More text
      </td>
  </tbody>
</table>

如何阻止单元格内容用于计算列宽

1 个答案: