html单选框跟<table>标签怎么处理？

我的一个简单页面，想在<tdboy>的各个<td>前加一个单选框，但没处理好
我的代码：

<form>
    <div class="container">
    <h2>product list</h2>


        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <td>

                    </td>
                    <th>产品ID</th>
                    <th>名称</th>
                    <th>价格</th>
                    <th>重量</th>
                    <th>规格</th>
                    <th>剩余数目</th>
                    <th>总销量</th>
                    <th>入库日</th>
                    <th>位置</th>
                </tr>
            </thead>

            <tbody>

            {% for goods in goodslist %}

                <tr>
                    <td>
                        <input type="radio" id="{{ goods.product_id }}">
                    </td>

                    <td>
                        {{goods.product_id}}
                    </td>
                    <td>
                        {{goods.name}}
                    </td>
                    <td>
                        {{ goods.price }}
                    </td>
                    <td>
                        {{ goods.weight }}
                    </td>
                    <td>
                        {{ goods.norms }}
                    </td>
                    <td>
                        {{ goods.residue_num }}
                    </td>
                    <td>
                        {{ goods.sale_total }}
                    </td>
                    <td>
                        {{ goods.storage_time }}
                    </td>
                    <td>
                        {{ goods.storage_location }}
                    </td>

                </tr>

            {% endfor %}

            </tbody>
        </table>


    </div>

        <div class="container">
            <a href="{{ url_for('goods.addProduct') }}" class="btn btn-primary">修改货品</a>
        </div>

     </form>

效果

变成了这样，这个<input>标签要怎么放才行的？

---

单选的话给个group，还有建议用flexbox布局或div配合display：table