Data overlap with the dtr-details i.e. more button

Question

This is what my issue looks like. The number is overlapping the plus icon as shown below:

I tried with the margin-left, padding and more css styling, but i need dynamic width with the data, like when the data is more then button should on overlap with data and when data is less is come closer to data.

columns: [
          {
            class: "dtr-control",
            orderable: false,
            data: null,
          },

-----CSS----
td.dtr-control {
    background: url('/assets/images/details_open.png')
    no-repeat center center;
    cursor: pointer;
    width: 70px;
}

---------------HTML--------------

                   <div class="row ">
                    <div class="table-responsive">
                     <table id="table_id" class="display 
                           "style="width:100%;margin-top:50px!important;">
                        <thead>
                           <tr>
                            <th scope="col">No</th>
                            <th scope="col">App Version</th>
                            <th scope="col">App Type</th>
                            <th scope="col">App Description</th>
                            <th scope="col">App Url</th>
                            <th scope="col">Device Type</th>
                            <th scope="col">Supported OS</th>
                            <th scope="col">Status</th>
                            <th scope="col">Action</th>
                           </tr>
                        </thead>
                     </table>
                    </div>
                  </div>