Who can help with HTML markup of tables?

[Pisych72]

{% extends 'store/menu.html' %}
{% load static %}
{% block DataArea %}

<div class="row">


<div class="col-md-12 mx-auto shadow">

<table class=" table shadow ">
<thead>
<tr>
<td style="width:75%"></td>
<td style="width:25%; " class="border text-end "> Номер документа </td>
<td style="width:25%;" class="border text-end" >Дата документа</td>

<td style="width:25%;" class="border text-end"></td>
</tr>
</thead>
    <form method="post" id="ost-form">
 {% csrf_token %}


    <tr><td><input  type="hidden" id="id_iddoc" value="{{docost.id}} " ></th>
        <td  class="border text-end" ><input type="text" id="id_nomerdoc" class="form-control" style="text-align:right" required value="{{docost.nomerdoc}}"></td>
        <td  "class="text-end pb-3"> <input type="date" id="id_datadoc" class="form-control" style="text-align:right" required value="{{docost.datadoc|date:'Y-m-d'}}"></td>

        <td class="border text-end"> <button type="submit" class="btn  btn-primary btn-sm mb-1 " id="savebtn">Сохранить</button></td>
    </form>
    </tr>
</table >


    <table class="  shadow table-bordered table-hover" >

        <form id="ost-string-form" method="post">
             {% csrf_token %}
            <td style="width:50%"  >Наименование, ед.изм.</td>

             <td  class="text-center  " >Цена</td>
             <td  class="text-center "  >Кол-во</td>
             <td  class="text-center ">Сумма</td>
             <td class="text-center  "  >НДС</td>
            <td  class="text-center " >Сумма с НДС</td>
<tr>
       <td > <select name="title" id="idtitle" class="form-control  " required >

            <option selected></option>
            {% for item in nom %}
            <option value="{{item.id}}">{{item.title}}, {{item.izm}}</option>
            {% endfor %}
       </select></td>

           <td> <input type="number" id="idprice" class="form-control text-end" step="any" required >
        </td></td>

         <td><input type="number" id="idkol" class="form-control text-end" step="any" required>
        </td>

       <td> <input type="number" id="idsumma" class="form-control text-end" step="any" required readonly>
        </td>

        <td><input type="number" id="idnds" class="form-control text-end" value="20" required>
        </td>

           <td> <input type="number" id="idtotal" class="form-control text-end" step="any" required readonly>
        </th>

        <td class="text-center"><button class="btn btn-primary btn-sm" type="submit">Записать</td>
</tr>
        </form>
    </table>
          <div class="scrolltable ">
              <table class="  shadow table-bordered table-hover "  id="string-table">
    <tbody id="string-ost">

    </tbody></table>
 </div>
</div>
</div>
{% endblock DataArea %}

AJAX:

<script>
 output='';

function GetSumm(){
let price=$("#idprice").val();
   let kol=$("#idkol").val();
   let nds=$("#idnds").val();
   let summa=price*kol
   let total=summa*((nds/100)+1);
   $("#idsumma").val(summa.toFixed(2));
    $("#idtotal").val(total.toFixed(2));
}

 $("#idprice").keyup(function(){
   GetSumm()
});

$("#idprice").change(function(){
    GetSumm()
});

$("#idkol").keyup(function(){
    GetSumm()
   });

 $("#idkol").change(function(){
    GetSumm()
   });
$("#idnds").keyup(function(){
    GetSumm()
   });

 $("#idnds").change(function(){
    GetSumm()
   });

$('#ost-string-form').on('submit',function(e){
event.preventDefault();
let _id=$('#id_iddoc').val();
let _title=$("#idtitle").val();
let _price=$("#idprice").val();
let _kol=$("#idkol").val();
let _summa=$("#idsumma").val();
let _nds=$("#idnds").val();
let _total=$('#idtotal').val();
let _csr=$("input[name=csrfmiddlewaretoken]").val();


mydata={
id:_id,
title:_title,
price:_price,
kol:_kol,
summa:_summa,
nds:_nds,
total:_total,
csrfmiddlewaretoken:_csr,
}
console.log(mydata)
$.ajax({
url:'/StringOstSave/',
method:"POST",
data:mydata,
dataType:"json",

success:function(data){
x=data.unit_data;
s=data.total;
sn=data.total_nds


if (data.status==1){
for(i=0;i<x.length;i++){
output +='<tr><td style="width:50%"> '+ x[i]['title__title']+", " + x[i]['title__izm__title']+'</td>'+
'<td  class="text-end  >'+ x[i]['price']+'</td>'+
'<td  class="text-end " >'+ x[i]['kol']+'</td>'+
'<td   class="text-end " >'+ x[i]['summa']+'</td>'+
'<td   class="text-end " >'+ x[i]['nds']+'</td>'+
'<td  class="text-end " >'+ x[i]['summawithnds']+'</td>'+
'<td  class="text-center" ><input data-sid='+x[i].id+' data-update='+x[i].id+' class="btn-nom-update " value="Update" type="image" src="../static/images/update.png" style="width:25px;" > </td>'+
'<td  class="text-center" ><input data-sid='+x[i].id+' data-del="#" class="btn-nom-delete " value="Update" type="image" src="../static/images/del.png" style="width:25px;" > </td></tr>'
}
itog='<tr style="color:blue"><td colspan=3>Итого:</td> <td class="text-end fixed">'+s+'<td></td><td class="text-end fixed">'+sn+'</td></tr>'

console.log(x);
console.log('saved');
 $('#string-ost').html(output)
 $('#string-table tr:last').after(itog);
    $("#ost-string-form")[0].reset();
}
}
});
});
</script>

I just want to get a beautiful table. What I’m getting now is just awful… How do I mark up the columns correctly so that they match the width of the main table? Thanks!

[Pisych72]

solution found. Im stupid