Align inputs with table columns

user_6456586 0
Viewed 42

can you help me to fix the alignment of my inputs? I need to place them above the last two columns ("Primary price" and "Secondary price"), for better understanding, I added a wireframe.

enter image description here

I added bootstrap columns in table cells but it broke whole table, this is a minimal sample:

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>

bootstrap-4 css html
1 Answers

I have come up with a way out of this problem.

Add another row at the top of the table. Since you have 4 cells in the following rows you would need to add the following to create a new row:

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

and in the css:

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

and you are done and go with some other ui changes as you want. Here is the js fiddle.

Do not forget to remove the <thead> from the table heading or else the the input boxes will come in second row itself.

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

user_160747730
Related