如何让我的专栏排队？

Question

我是JS的新手。我试图让我的表格上的标题与表格数据对齐。通常很容易做到，但在我的情况下，我将使用JQuery附加td。我已经尝试了我能想到的一切。我正在使用Bootstrap。使用类col-md-x不起作用。使用width =“X”不起作用。我可以让td在页面上传播，但是标题不排成一行。

以下是问题的图像：

这是HTML NB与问题无关，但是，“form :: select”在Laravel中：

 <h4>Add A Product</h4>
{!! Form::select('categories[]',$categories,null, ['class'=>'form-control categories', 'placeholder'=>'None']) !!}

<div class="hide_table show_table table-responsive ">

<table class=".table" >
<thead>

    <tr>
    <th class="col-md-2">Product</th>
    <th class="col-md-2">Price</th>
    <th class="col-md-2">Add to Quote</th>
    </tr>

</thead>
    <tbody class = "row cat_products form-control">
    </tbody>
</table>
</div>

Jquery：

 $.ajax({
        type: 'GET',
        dataType: "json",
        url: 'category_prices/' + value,
        success: function (categories) {
             $cat_products.empty();

            $.each(categories, function (i, product) {$(".cat_products").append('<tr><td>' +product.product_name+ '</td><td>' +product.price+ '</td><td> <input type="checkbox" value="cat_id"></td></tr>').css({
                    "background-color": "rgba(10, 30, 41, 0.05)",
                    "border": "solid 1.5px lightblue",
                    "border-radius": "5px",
                    "height":"auto",
                    // "width":"800px",
                });

                $("td").addClass("col-md-2");
            });


        }
    });