html - 在 TD 内将 DIV 与同一行上的其他元素对齐

Question

我需要第 3 列看起来像第 1 列。

我看到它的行为方式是因为 DIV。如果我把它拿出来，它就会起作用。

标准:

• 第 3 列中必须有一个 DIV(这是我无法控制的)；
• 我希望第 3 列占表格的 50%；
• 不需要添加其他元素来包裹其他元素
• BUTTON 可以有固定的宽度；
• SELECT 应填满 TD 的所有可用空间。

我可以将 float: left 或 display: inline-block 添加到 DIV，但我还需要 select 来拉伸(stretch)。

我正在使用 Bootstrap，因此可以推荐它，因为它满足标准。

table {
  background: yellow;
}

td {
  border: red 2px solid;
}

  <table>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
    <tr>
      <td>
        <select name="person">
          <option value="1">Item 1</option>
        </select>
        <button type="button">ADD</button>
      </td>
      <td>
        <input type="text" value="100">
      </td>
      <td>
        <div>
          <select name="person">
            <option value="1">Item 1</option>
          </select>
        </div>
        <button type="button">ADD</button>
      </td>
    </tr>
  </table>

Answer 1

您可以通过以下方式完成此操作:

1. 使第三个 td 成为 flex 容器。
2. 仅使其 div 子元素成为 flex 元素。
3. 将 select 设置为 100% 宽度。
4. 将第三个 th 设置为 50% 宽度。

片段:

table {
  background: yellow;
}

td {
  border: red 2px solid;
}

td:nth-child(3) {
  display: flex;
}

td:nth-child(3) div {
  flex: 1;
}

td:nth-child(3) select {
  width: 100%;
}

th:nth-child(3) {
  width: 50%;
}

<table>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
    <tr>
      <td>
        <select name="person">
          <option value="1">Item 1</option>
        </select>
        <button type="button">ADD</button>
      </td>
      <td>
        <input type="text" value="100">
      </td>
      <td>
        <div>
          <select name="person">
            <option value="1">Item 1</option>
          </select>
        </div>
        <button type="button">ADD</button>
      </td>
    </tr>
  </table>