text box in table is wider in a strange way - bootstrap-5

Question

I have a table in a bootstrap-5 web page:
<table class="table align-middle table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
<th scope="col">TITLE 1</th>
<th scope="col">TITLE 2</th>
<th scope="col">TITLE 3</th>
<th scope="col">TITLE 4</th>
<th scope="col">TITLE 5</th>
<th scope="col">TITLE 6</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td><div class="col-12 col-md-3"><input type="text" class="form-control form-control-sm" placeholder="sum"></div></td>
<td>foo</td>
<td>boo</td>
<td>goo</td>
<td>poo</td>
<td>zoo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
<td><div class="col-12 col-md-3"><input type="text" class="form-control form-control-sm" placeholder="sum"></div></td>
<td>foo</td>
<td>boo</td>
<td>goo</td>
<td>poo</td>
<td>zoo</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>Bird</td>
<td>#twitter</td>
<td><div class="col-12 col-md-3"><input type="text" class="form-control form-control-sm" placeholder="sum"></div></td>
<td>foo</td>
<td>boo</td>
<td>goo</td>
<td>poo</td>
<td>zoo</td>
</tr>
</tbody>
</table>
In small screens it looks good:
But in a wider screen there is a strange wide column for the text box:
How to fix it, and make the text box column to be same width as the other columns?

Answer 1

Fairly self explanatory, you have a div around that input field that is setting a column size:
<td><div class="col-12 col-md-3"><input type="text" class="form-control form-control-sm" placeholder="sum"></div></td>
Simply remove it and the column will scale with the rest of the table:
<td><input type="text" class="form-control form-control-sm" placeholder="sum"></td>
EDIT:
Something like this would set a fixed width for all table columns:
td {
width: 10%;
}