在 table 单元格内使用 Bootstrap4/Flexbox，将单元格拆分为 2 列，其中一列是绝对位置

Question

我有一个 html table 有 6 table 列。 table 列 header 称为 Part Description 被分成 2 个 flexbox 列。第一个 flexbox 列很好。第二个 flexbox 列是问题所在。

第二列包含一个绝对定位的 select 框，我想在 table 单元格内右对齐。在单元格中，我使用了一个 flexbox div 并将每一列包装在这个 div 中。 codepen 展示了我试图将绝对定位框 [-Alternatives-] 与另一个 table 单元格 [ORD QTY]

右对齐的尝试

Attempt1，Row1 - 使用 bootstrap 类 d-flex justify-content-between 显示 table 单元格。问题：[- 备选方案 -] 框未包含在 table 单元格中并覆盖下一个单元格。

Attempt2，Row2 - 使用相同的 bootstrap 类显示 table 单元格，内部列使用 css flex 以获得稍微更好的布局。问题：table 单元格开始覆盖宽度低于 992 像素的屏幕。 .fb-1 { flex: 1 1 自动; } .fb-2 { flex: 2 1 自动; }

Attempt3，Row3 - 使用相同的 bootstrap 类显示 table 单元格，内部列使用 css flex，第一列设置 flex-basis 宽度。问题：table 单元格开始覆盖在 768 像素以下的屏幕宽度上。

理想情况下，我希望 [-Alternatives-] 框右对齐并留在 table 单元格内而不流出它。也许 Flexbox 不是这里的理想解决方案？

HTML 有问题的 table 单元格的代码如下：

   <tr class="part-row">
    <td class="part-lock part-select">&nbsp;</td>
    <td class="part part-select" data-weight="3.19KG/Per K" data-partinfo2="100/P100">H001-004-0030</td>
    <td class="part-select part-hover">
      <div class="d-flex justify-content-between">
        <div class="pr-0"><span class="part-desc">4017/933-8.8 4x30</span><br><span class="part-desc2">Flat Head Screw Full Thread</span></div>
        <div class="px-2">
          <div class="position-relative"><select class="hide part-alt-select part-alt-btn">
              <option value="">-&nbsp;Alternatives&nbsp;-</option>
              <option value="Original" data-alt="1">Original</option>
              <option value="Thread Options" data-alt="2">Thread Options</option>
              <option value="Coating Options" data-alt="3">Coating Options</option>
              <option value="Grade Options" data-alt="4">Grade Options</option>
              <option value="All" data-alt="5">All</option>
            </select></div>
        </div>
      </div>
    </td>
    <td><input class="part-select table-qty" type="number" name="qty-ord1" id="qty-ord1" min="100" step="100" data-uom-code="P100" value="0"></td>
    <td class="part-select product-add2-cart"><button type="button"><i class="fa fa-cart-plus" aria-hidden="true"></i></button></td>
    <td class="part-select jq-truck popwrap" style="text-align: left">
      <div class="d-flex justify-content-between">
        <div><img class="truck-img" src="/images/truck.png" alt="truck"><span class="part-cust"> &nbsp;</span></div>

      </div>
    </td>
  </tr>

Answer 1

如果我理解正确，你应该关闭 select 框的绝对位置并将 text-right 添加到它的父项：

<tr class="part-row">
    <td class="part-lock part-select">&nbsp;</td>
    <td class="part part-select" data-weight="3.19KG/Per K" data-partinfo2="100/P100">H001-004-0030</td>
    <td class="part-select part-hover">
      <div class="d-flex justify-content-between">
        <div class="pr-0"><span class="part-desc">4017/933-8.8 4x30</span><br><span class="part-desc2">Flat Head Screw Full Thread</span></div>
        <div class="px-2 fb-1 text-right"> <!-- added a for text align right -->
          <div class="position-relative"><select class="hide part-alt-select part-alt-btn">
              <option value="">-&nbsp;Alternatives&nbsp;-</option>
              <option value="Original" data-alt="1">Original</option>
              <option value="Thread Options" data-alt="2">Thread Options</option>
              <option value="Coating Options" data-alt="3">Coating Options</option>
              <option value="Grade Options" data-alt="4">Grade Options</option>
              <option value="All" data-alt="5">All</option>
            </select></div>
        </div>
      </div>
    </td>
    <td><input class="part-select table-qty" type="number" name="qty-ord1" id="qty-ord1" min="100" step="100" data-uom-code="P100" value="0"></td>
    <td class="part-select product-add2-cart"><button type="button"><i class="fa fa-cart-plus" aria-hidden="true"></i></button></td>
    <td class="part-select jq-truck popwrap" style="text-align: left">
      <div class="d-flex justify-content-between">
        <div><img class="truck-img" src="/images/truck.png" alt="truck"><span class="part-cust"> &nbsp;</span></div>

      </div>
    </td>
  </tr>

和

select.part-alt-btn {
    position: relative; /* changed form absolute */
    font-size: 13px;
    padding: 2px 1px;
    color: white;
    background: #a5202d;
    border: 1px solid #65161e;
    margin: 2px 0 0;
    z-index: 9;
}

在 table 单元格内使用 Bootstrap4/Flexbox，将单元格拆分为 2 列，其中一列是绝对位置

Using Bootstrap4/Flexbox inside of a table cell, splitting cell into 2 columns, one column is absolute position

html

css

css-position

flexbox

twitter-bootstrap