html - 忽略一些用于计算 HTML 表格列宽的单元格

Question

如果没有固定宽度，浏览器会计算表格列的最佳宽度。有没有一种方法可以依靠自动计算但忽略某些单元格的内容？

我的用例如下:我有一个表格，其中一行带有过滤器。输入元素用于过滤器。输入元素应填满列的整个宽度。但它们不应影响列的宽度。

这是我的表格的简化版本。两个版本中的列应具有相同的宽度。

table {
  width: 100%;
  border-collapse: collapse;
}

td, th {
  border: 1px solid;
}

input {
  box-sizing: border-box;
  width: 100%;
}

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Address</th>
    </tr>
    <tr>
      <td><input></td>
      <td><input></td>
      <td><input></td>
    </tr>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john-doe@examples.com</td>
      <td>203 East 50th St., Suite 1157, New York, NY 10022, USA</td>
    </tr>
  </tbody>
</table>

<hr>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Address</th>
    </tr>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john-doe@examples.com</td>
      <td>203 East 50th St., Suite 1157, New York, NY 10022, USA</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Address</th>
    </tr>
    <tr>
      <td><input></td>
      <td><input></td>
      <td><input></td>
    </tr>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john-doe@examples.com</td>
      <td>203 East 50th St., Suite 1157, New York, NY 10022, USA</td>
    </tr>
  </tbody>
</table>

解决方案不应使用任何 JavaScript 或固定宽度。

我玩弄了 position和 display <input>的风格但无法提出解决方案。但老实说，我不是 CSS 专家，所以我可能只是错过了明显的解决方案。

Answer 1

Position:relative/absolute 将输入设置为关闭文档流，这是避免在计算表格布局时考虑输入的唯一方法。

您可以为单元格设置一个高度，这实际上更像是最小高度，因为表格会增长和缩小以适应内容。

您可能已经测试过的内容的演示。

table {
 width:100%;
  border-collapse: collapse;
}

td, th {
  border: 1px solid;
  position:relative;
  height:1.3em;
  
 
}

input {
  box-sizing: border-box; 
  position:absolute;
  width:100%;
  left:0;
  top:0;

}

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Address</th>
    </tr>
    <tr>
      <td><input></td>
      <td><input></td>
      <td><input></td>
    </tr>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john-doe@examples.com</td>
      <td>203 East 50th St., Suite 1157, New York, NY 10022, USA</td>
    </tr>
  </tbody>
</table>

<hr>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Address</th>
    </tr>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john-doe@examples.com</td>
      <td>203 East 50th St., Suite 1157, New York, NY 10022, USA</td>
    </tr>
  </tbody>
</table>

---

另一种棘手的方法是使用负边距实际上将输入使用的空间减少到零。 https://codepen.io/gc-nomade/pen/WNNLXKN

table {
  width: 100%;
  border-collapse: collapse;
}

td,
th {
  border: 1px solid;
}

tr :first-child {
  white-space: nowrap;/* or min-width or nothing : optionnal */
}

input {
  box-sizing: border-box;
  margin-right: -100vw;
  width: 100%;
  float: left;/* or vertical-align:top; or display:block; or nothing; : to remove gap under input , optionnal */
  /* also , text-indent has no effect on a floatting element */
}

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Address</th>
    </tr>
    <tr>
      <td><input></td>
      <td><input></td>
      <td><input></td>
    </tr>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>john-doe@examples.com</td>
        <td>203 East 50th St., Suite 1157, New York, NY 10022, USA</td>
      </tr>
    </tbody>
</table>

<hr>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Address</th>
    </tr>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>john-doe@examples.com</td>
        <td>203 East 50th St., Suite 1157, New York, NY 10022, USA</td>
      </tr>
    </tbody>
</table>