动态表格colspan布局异常，求前端解决方案

我正在做一个动态表格设计，无法正确处理后续<tr>中的colspan属性。虽然colspan是动态添加的，且每行的colspan数值总和完全正确，但表格的布局与分割效果不符合预期。

<div class="container">
        <section class="mt-5">
           
            <table class="binary" style="width:50%">
                <colgroup>
                    <col span="1286">
                </colgroup>
                <tbody><tr>
                    <td colspan="1019" style="background:Green; color:#fff;" class="" data-toggle="modal" ng-click="postdata('1', '1')" data-target="#myModal" data-bs-toggle="modal" data-bs-target="#exampleModal">1019</td>
                    <td colspan="267" style="background:Black; color:#fff;" class="" data-toggle="modal" ng-click="postdata('2', '1')" data-target="#myModal" data-bs-toggle="modal" data-bs-target="#exampleModal">267</td>
                </tr>
                <tr>

                    <td colspan="1002" style="background:Green; color:#fff;" class="" data-toggle="modal" ng-click="postdata('1', '2')" data-target="#myModal" data-bs-toggle="modal" data-bs-target="#exampleModal">1002</td>
                    <td colspan="17" style="background:Black; color:#fff;" class="" data-toggle="modal" ng-click="postdata('2', '2')" data-target="#myModal" data-bs-toggle="modal" data-bs-target="#exampleModal">17</td>
                    <td colspan="267" style="background:Black; color:#fff;" class="" data-toggle="modal" ng-click="postdata('4', '2')" data-target="#myModal" data-bs-toggle="modal" data-bs-target="#exampleModal">267</td>
                </tr>
                <tr>

                    <td colspan="995" style="background:Green; color:#fff;" class="" data-toggle="modal" ng-click="postdata('1', '3')" data-target="#myModal" data-bs-toggle="modal" data-bs-target="#exampleModal">995</td>
                    <td colspan="7" style="background:Black; color:#fff;" class="" data-toggle="modal" ng-click="postdata('2', '3')" data-target="#myModal" data-bs-toggle="modal" data-bs-target="#exampleModal">7</td>
                    <td colspan="17" style="background:Black; color:#fff;" class="" data-toggle="modal" ng-click="postdata('4', '3')" data-target="#myModal" data-bs-toggle="modal" data-bs-target="#exampleModal">17</td>
                    <td colspan="267" style="background:Black; color:#fff;" class="" data-toggle="modal" ng-click="postdata('8', '3')" data-target="#myModal" data-bs-toggle="modal" data-bs-target="#exampleModal">267</td>
                </tr>
                <tr>

                    <td colspan="994" style="background:Green; color:#fff;" class="" data-toggle="modal" ng-click="postdata('1', '4')" data-target="#myModal" data-bs-toggle="modal" data-bs-target="#exampleModal">994</td>
                    <td colspan="1" style="background:Black; color:#fff;" class="" data-toggle="modal" ng-click="postdata('2', '4')" data-target="#myModal" data-bs-toggle="modal" data-bs-target="#exampleModal">1</td>
                    <td colspan="7" style="background:Black; color:#fff;" class="" data-toggle="modal" ng-click="postdata('4', '4')" data-target="#myModal" data-bs-toggle="modal" data-bs-target="#exampleModal">7</td>
                    <td colspan="17" style="background:Black; color:#fff;" class="" data-toggle="modal" ng-click="postdata('8', '4')" data-target="#myModal" data-bs-toggle="modal" data-bs-target="#exampleModal">17</td>
                    <td colspan="1" style="background:Green; color:#fff;" class="" data-toggle="modal" ng-click="postdata('15', '4')" data-target="#myModal" data-bs-toggle="modal" data-bs-target="#exampleModal">1</td>
                    <td colspan="266" style="background:Black; color:#fff;" class="" data-toggle="modal" ng-click="postdata('16', '4')" data-target="#myModal" data-bs-toggle="modal" data-bs-target="#exampleModal">266</td>
                </tr>
                <tr>

                    <td colspan="994" style="background:Green; color:#fff;" class="" data-toggle="modal" ng-click="postdata('1', '5')" data-target="#myModal" data-bs-toggle="modal" data-bs-target="#exampleModal">994</td>
                    <td colspan="1" style="background:Black; color:#fff;" class="" data-toggle="modal" ng-click="postdata('4', '5')" data-target="#myModal" data-bs-toggle="modal" data-bs-target="#exampleModal">1</td>
                    <td colspan="7" style="background:Black; color:#fff;" class="" data-toggle="modal" ng-click="postdata('8', '5')" data-target="#myModal" data-bs-toggle="modal" data-bs-target="#exampleModal">7</td>
                    <td colspan="17" style="background:Black; color:#fff;" class="" data-toggle="modal" ng-click="postdata('16', '5')" data-target="#myModal" data-bs-toggle="modal" data-bs-target="#exampleModal">17</td>
                    <td colspan="1" style="background:Green; color:#fff;" class="" data-toggle="modal" ng-click="postdata('29', '5')" data-target="#myModal" data-bs-toggle="modal" data-bs-target="#exampleModal">1</td>
                    <td colspan="266" style="background:Black; color:#fff;" class="" data-toggle="modal" ng-click="postdata('32', '5')" data-target="#myModal" data-bs-toggle="modal" data-bs-target="#exampleModal">266</td>
                </tr>
                <tr>

                    <td colspan="958" style="background:Green; color:#fff;" class="" data-toggle="modal" ng-click="postdata('1', '6')" data-target="#myModal" data-bs-toggle="modal" data-bs-target="#exampleModal">958</td>
                    <td colspan="36" style="background:Black; color:#fff;" class="" data-toggle="modal" ng-click="postdata('2', '6')" data-target="#myModal" data-bs-toggle="modal" data-bs-target="#exampleModal">36</td>
                    <td colspan="1" style="background:Black; color:#fff;" class="" data-toggle="modal" ng-click="postdata('8', '6')" data-target="#myModal" data-bs-toggle="modal" data-bs-target="#exampleModal">1</td>
                    <td colspan="7" style="background:Black; color:#fff;" class="" data-toggle="modal" ng-click="postdata('16', '6')" data-target="#myModal" data-bs-toggle="modal" data-bs-target="#exampleModal">7</td>
                    <td colspan="17" style="background:Black; color:#fff;" class="" data-toggle="modal" ng-click="postdata('32', '6')" data-target="#myModal" data-bs-toggle="modal" data-bs-target="#exampleModal">17</td>
                    <td colspan="1" style="background:Black; color:#fff;" class="" data-toggle="modal" ng-click="postdata('58', '6')" data-target="#myModal" data-bs-toggle="modal" data-bs-target="#exampleModal">1</td>
                    <td colspan="266" style="background:Black; color:#fff;" class="" data-toggle="modal" ng-click="postdata('64', '6')" data-target="#myModal" data-bs-toggle="modal" data-bs-target="#exampleModal">266</td>
                </tr>


            </tbody></table>
    
    </section>
    </div>

我尝试过使用ul、li、div等多种标签来实现该布局，但都无法达到预期效果，希望有人能帮忙解决这个问题。

内容的提问来源于stack exchange，提问作者Shubham Tiwari