Fix table width to the screen width even when data in a column is large

Question

I have a DataTable with 6 columns where the content of 6th column is sometimes so large that the width of table goes outside the screen.

Is there any way to not make the table width extend the screen width and also preserve the contents of the columns?

An example image is here:

HTML CODE

<div id="tables">
        <div id="Running" class="tabcontent">
            <table id="running" class="table table-striped table-hover dt-responsive display nowrap" width="100%">
            </table>
        </div>
</div>

JS CODE

$.getJSON("realtime/2010/jsonoutput.json", function(data) {
  $.each(data, function(key, value) {
    job_data = [key, value["Jobname"], value["Username"], value["Queue"], value["Elapsed_Time"], value["RequiredTime"], value["Exec_host"].join(',')];

    if (value["State"] == "R") {
      running_data.push(job_data);
    } else if (value["State"] == "Q")
      queue_data.push(job_data);
    else
      hold_data.push(job_data);
  });

  $('#running').DataTable({
    destroy: true,
    responsive: false,
    data: running_data,
    stateSave: true,
    columnsDefs: [{
      visible: false,
      targets: [1]
    }],
    columns: [
      { title: "Job ID" },
      { title: "Job Name" },
      { title: "User" },
      { title: "Queue" },
      { title: "Elapsed_Time" },
      { title: "Required_Time" },
      { title: "Exec_host" }
    ],
  });