In some cases, the contents of the table go beyond its boundaries

enter image description here
enter image description here
The last column of table in some cases climb out of the table.
There is an js:

function buildFilesTable(data) {
  const tableBody = $('.raw-revenue-files-table tbody');
  $('.batch-remove').hide();
  $(".selectAll").prop("checked", false);
  $("#counter").html(0);
  $(".checkboxes").prop("checked", false);
  tableBody.html('');

  if (!data.length) {
    tableBody.append(
      `<td colspan="6" class='text-center'>THERE IS NO FILES</td>`
    );
  } else {
    $.each(data, function (i, item) {
      var row = `
          <tr>
              <td><input type="checkbox" 
                         name="selectId" 
                         id="${item.id}" 
                         value=${item.name} 
                         class="checkboxes" /> </td> 
              <td style="max-width:300px;width:300px;word-wrap: break-word;">${
                item.name
              }</td>
              <td>${$.utils.pretifyNumber(item.revenue.net)}</td>
              <td>${$.utils.pretifyNumber(item.revenue.gross)}</td>
              <td>${$.utils.pretifyNumber(item.rawRevenue.net)}</td>
              <td>${$.utils.pretifyNumber(item.rawRevenue.gross)}</td>
              <td>
                <span class="pills ${item.validationStatus}">
                  ${item.validationStatus}
                </span>
              </td>
              <td>
                ${item.existsOnS3 ? 'true' : 'false'}
              </td>
              <td>
                <div class="row ml-0 mr-0">
                 
                  <div class="col-6 pl-0 pr-0">
                    <button
                      type="button"
                      class="btn btn01 small"
                      data-toggle="modal"
                      data-dismiss="modal"
                      data-target="#modalValidate"
                      data-file-id=${item.id}
                      data-ingestion-date=${item.ingestionDate}
                      data-validation-date=${item.validationDate}
                      data-ingestion-total=${
                        item.revenue.net || item.revenue.gross
                      }
                      data-validation-total=${item.validationTotal}
                      data-status=${item.validationStatus}
                    >
                      Validate
                    </button>
                  </div>
                </div>
              </td>
          </tr>
      `;

      tableBody.append(row);
    });
  }
}

There is html:

<div class="modal fade" id="rawRevenueFiles" role="dialog" aria-labelledby="rawRevenueFilesLabel"
             aria-hidden="true">
            <div class="modal05 modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <table class="table table01 raw-revenue-files-table">
                            <thead>
                            <tr>
                                <th>
                                    <label id="counter" for="selectAll">0</label>
                                    <input type="checkbox" class="selectAll" id="selectAll" name="selectAll">
                                </th>
                                <th>Name</th>
                                <th>Net</th>
                                <th>Gross</th>
                                <th>Net (Raw)</th>
                                <th>Gross (Raw)</th>
                                <th>Status</th>
                                <th>Existence on S3</th>
                                <th>
                                    <button type="button" class="btn btn01 small batch-remove">
                                        Remove
                                    </button>
                                </th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

There is a css:

.summary-table td {
    vertical-align: middle;
    transition: all 0.14s ease-in-out;
}

.summary-table td p:first-child {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgb(255 255 255 / 10%);
}

.summary-table td p:last-child {
    margin: 0;
    color: #a4a6a9;
}

.summary-table td p.DIFFER {
    color: #d8e02b;
}

.summary-table td p.VALID {
    color: #21A35E;
}

.summary-table td p.NOT_VALID {
    color: #E03F4A;
}

.summary-table tfoot {
    background: #242C33;
}

.summary-table thead th:first-child {
    text-align: left;
    padding-left: 10px;
}

.modal .table01.raw-revenue-files-table td {
    padding: 15px 10px;
    vertical-align: middle;
}

I’m a back-end developer, but i need to fix this issue with the last column in the table. Can you fix my css, please?

I expect a correct table view.