html - 将输入与表列对齐

Question

你能帮我修正输入的对齐吗？我需要将它们放在最后两列(“主要价格”和“次要价格”)的上方，为了更好地理解，我添加了一个线框。

我在表格单元格中添加了引导列，但它破坏了整个表格，这是一个最小的示例:
https://jsfiddle.net/ma7pv408/

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="row">
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th class="col-1" scope="col">#</th>
        <th class="col-3" scope="col">Name</th>
        <th class="col-4" scope="col">Primary price</th>
        <th class="col-4" scope="col">Secondary price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th class="col-1" scope="row">1</th>
        <td class="col-3">Mark</td>
        <td class="col-4">9€</td>
        <td class="col-4">100€</td>
      </tr>
      <tr>
        <th class="col-1" scope="row">2</th>
        <td class="col-3">Jacob</td>
        <td class="col-4">23€</td>
        <td class="col-4">208€</td>
      </tr>
      <tr>
        <th class="col-1" scope="row">3</th>
        <td class="col-3">Larry</td>
        <td class="col-4">21€</td>
        <td class="col-4">90€</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

我想出了解决这个问题的方法。
在表格顶部添加另一行。由于以下行中有 4 个单元格，因此您需要添加以下内容以创建新行:

<tr id='price-row'>
    <td colspan=2>Main Prices</td>
    <td><input id='input1'></td>
    <td><input id='input2'></td>
</tr>

并在 css 中:

#price-row, #price-row td{
    border: none;
}

您已完成并根据需要进行其他一些 ui 更改。这是 js fiddle .
不要忘记删除 <thead>从表格标题，否则输入框将出现在第二行本身。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" />

<div class="row">
  <table class="table">
    <tr id='price-row'>
      <td colspan=2>Main Prices</td>
      <td><input id='input1'></td>
      <td><input id='input2'></td>
    </tr>
    <tr>
      <th class="col-1" scope="col">#</th>
      <th class="col-3" scope="col">Name</th>
      <th class="col-4" scope="col">Primary price</th>
      <th class="col-4" scope="col">Secondary price</th>
    </tr>

    <tbody>
      <tr>
        <th class="col-1" scope="row">1</th>
        <td class="col-3">Mark</td>
        <td class="col-4">9€</td>
        <td class="col-4">100€</td>
      </tr>
      <tr>
        <th class="col-1" scope="row">2</th>
        <td class="col-3">Jacob</td>
        <td class="col-4">23€</td>
        <td class="col-4">208€</td>
      </tr>
      <tr>
        <th class="col-1" scope="row">3</th>
        <td class="col-3">Larry</td>
        <td class="col-4">21€</td>
        <td class="col-4">90€</td>
      </tr>
    </tbody>
  </table>
</div>
</div>