将输入与表格列对齐答案

【问题标题】：Align inputs with table columns将输入与表格列对齐
【发布时间】：2021-09-12 14:26:31
【问题描述】：

您能帮我解决输入的对齐问题吗？我需要将它们放在最后两列（“Primary price”和“Secondary price”）上方，为了更好地理解，我添加了一个线框。

我在表格单元格中添加了引导列，但它破坏了整个表格，这是一个最小示例：

<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>

【问题讨论】：

这些字段需要在表中有什么原因吗？表格通常应该只包含表格数据。

标签： html css bootstrap-4

【解决方案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>

【讨论】：