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

Question

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

我看到它的行为方式是因为 DIV。如果我把它拿出来，它就可以了。

条件：

Column 3 里面一定有一个DIV（这是我无法控制的）；
我希望第 3 列占 table;
不需要添加其他元素来包裹其他元素
BUTTON 可以有固定的宽度；
SELECT 应填写所有可用的 space TD。

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

我正在使用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

试试这个 CSS:

table {
   background: yellow;
}

td {
   border: red 2px solid;
}

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

table td:nth-child(3) div{
   width:80%;
   float:left;
   display: table;
}

table td:nth-child(3) button{
   width:20%;
}

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

Answer 2

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

使第三个 td 成为弹性容器。
仅使其 div 子元素成为弹性元素。
将 select 设置为 100% 宽度。
将第三个 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>

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

Align a DIV along other elements on the same line, inside a TD

html

css

html-table