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

Question

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

我认为它因为DIV而表现得那样。如果我把它拿出来就行了。

标准：

• 第3列必须有一个DIV（它不受我的控制）;
• 我希望第3列占据桌子的50％;
• 不需要添加其他元素来包装其他元素
• 按钮可以有固定的宽度;
• SELECT应填充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

您可以通过以下方式完成此任务：

1. 使第三个td成为灵活容器。
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>