强制输入组完全可见，而不是包裹在 table 单元格中

Question

我有一个输入组，其中一个输入和按钮放置在 table 单元格中，但是，按钮环绕在某个 size.I 下面想要防止这种行为，特别是对于这个 table 单元格和列的其余部分。相关生成的 html (javascript 添加元素):

<div id="inspireRecords" class="table-responsive">
<table class="table table-sm" id="inspireTable"><thead><tr>
        <th>Title
        <i onclick="sort_table(&quot;#inspireTable&quot;,0)" class="fas fa-sort" aria-hidden="true"></i>
        </th>
        .
        .
        .
        <th>Projects</th></tr></thead><tbody><tr>
    <td data-sort="n-flation" class="title">N-flation</td>
    .
    .
    .
    <td>
        <div class="input-group p-0">
            <select class="form-select projectSelect"      
                <option value="0" selected="">Choose...</option>
                <option value="1">Test</option>
                <option value="2">Test 2</option>
                <option value="3">Test 3</option>
            </select>
            <button class="btn btn-primary projectSelectBtn" type="button">Add</button>
        </div>
    </td></tr></tbody>
</table></div>

自定义 CSS（将适用）：

th {
    white-space: nowrap;
}

div {
    padding: 0.5rem 0;
}

目前的样子：

我一直希望它是这样的，即使它需要滚动：

如果我是初学者，如果设计看起来很糟糕，我也欢迎其他想法。

Answer 1

首先，你这里有一个未关闭的标签：

<select class="form-select projectSelect" <option value="0" selected="">Choose...

这会给您带来麻烦。你用的是什么代码编辑器？我建议使用格式化程序插件，例如 Prettier，以帮助您正确格式化代码。

回到你的问题，我刚刚测试了你的代码并且在 Bootstrap 5 上工作正常，所以确保你链接的库版本与你的 classes 相对应正在使用。

如果问题仍然存在，请将以下 flex class 添加到包含您的元素的 div 以使子项（select 输入和按钮）在行方向上保持不换行。

.flex-row {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}

请在下面找到完整的示例。 table 是 200px 宽只是为了证明元素不会换行。已测试并有效。

table {
  max-width: 200px;
}

th {
  white-space: nowrap;
}

div {
  padding: 0.5rem 0;
}

.flex-row {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" />

<div id="inspireRecords" class="table-responsive">
  <table class="table table-sm" id="inspireTable">
    <thead>
      <tr>
        <th>Title
          <i onclick="sort_table(&quot;#inspireTable&quot;,0)" class="fas fa-sort" aria-hidden="true"></i>
        </th>
        . . .
        <th>Projects</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-sort="n-flation" class="title">N-flation</td>
        . . .
        <td>
          <div class="input-group p-0 flex-row">
            <select class="form-select projectSelect">
              <option value="0" selected="">Choose...</option>
              <option value="1">Test</option>
              <option value="2">Test 2</option>
              <option value="3">Test 3</option>
            </select>
            <button class="btn btn-primary projectSelectBtn" type="button">Add</button>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

强制输入组完全可见，而不是包裹在 table 单元格中

Force input group to fully be visible and not wrap in a table cell

css

html-table

bootstrap-5