将 select 和 input 元素中的文本垂直对齐到顶部

Question

我有一些高度为 100% 的 select 和 input 元素（输入必须为 100% 高度！），以便它们适合表格单元格。这些输入可以是任何高度，我希望文本垂直对齐到顶部，以便与第 2 列匹配。

这可以用纯 CSS 实现吗？如果没有，是否有任何好的解决方法可以让我继续使用香草 HTML 输入？我想避免使用 JavaScript，但如果这是唯一的选择，请不要使用它。

请注意，我不关心 IE 或 Safari 支持。

table {
  height: 1px;
  table-layout: fixed;
  border-collapse: collapse;
}

td {
  position: relative;
  height: 100%;
  border: 1px solid grey;
  padding: 0;
}

input,
select {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  background: none;
  border: none;
}

<table>
  <colgroup>
    <col style="width: 50%">
  </colgroup>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <input type="text" value="Should be top aligned">
      </td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </td>
    </tr>

    <tr>
      <td>
        <select>
          <option>Should be top aligned</option>
          <option>Item 2</option>
        </select>
      </td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </td>
    </tr>
  </tbody>

</table>

附：这不是重复的，因为我的输入具有动态高度，所以我不能使用这里提到的填充解决方案css align text in input vertically to top

Answer 1

我认为你不能在纯 CSS 中做到这一点。垂直对齐输入元素很痛苦。

我编写了一个小脚本来将 padding-bottom 的值设置为您输入的高度，以便它保持在顶部。这不是理想的方式，但确实有效！

alignAllInputs()
    window.onresize = () => {
        alignAllInputs()
    }
    function alignAllInputs() {
        let a = document.querySelectorAll('tr td:first-child input')
        a.forEach((item) => {
            item.style.paddingBottom = 0 + 'px'
            item.style.paddingBottom = (a[0].offsetHeight - 20) + 'px'
        })
    }

table {
    height: 1px;
    table-layout: fixed;
    border-collapse: collapse;
}

td {
    position: relative;
    border: 1px solid grey;
    padding: 0;
}

input,
select {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    background: none;
    border: none;
}

<table>
    <colgroup>
        <col style="width: 50%">
    </colgroup>
    <thead>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>
            <input type="text" value="Should be top aligned">
        </td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </td>
    </tr>

    <tr>
        <td>
            <select>
                <option>Should be top aligned</option>
                <option>Item 2</option>
            </select>
        </td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </td>
    </tr>
    </tbody>

</table>