0

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

error reference image

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>
Sahil Khan
  • 1
  • Place the icon in its own column - like they do in the [official example](https://datatables.net/examples/api/row_details.html). – andrewJames May 29 '23 at 13:05
  • Otherwise, if that does not help, please provide a [mre] in your question. You can take a look at [ask] and also browse other topics in the [help] for more guidance. – andrewJames May 29 '23 at 13:07

0 Answers0