我把你的代码复制到小提琴上了
View the fiddle here
你还没有说它应该是什么样子，但我已经删除了css文件

<!--
<link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
-->

而且显示正常吗
更新：我添加了以下样式来修复出现的额外空格。它还修复了列滚动问题。：

.table {
    margin-bottom: 0 !important;
}

看看小提琴。

我把下面的CSS添加到你的代码中。对于datatable分区，宽度不应以像素为单位。

#DataTables_Table_0, .DataTables_scrollHeadInnner, .dataTable {width:100% !important;}

function format(number, decimals = 2, locale = 'en-in') {
  const fixed = parseInt(number).toFixed(decimals);
  const [int, dec] = fixed.split('.')
  const intFormatted = (+int).toLocaleString(locale)
  return intFormatted + (dec ? '.' + dec : '');
}

var data = [{
    "amount": 137551,
    "billdate": "2018-12-01",
    "outlet": "CHEF BAKERS BROOKFIELD"
  },
  {
    "amount": 130832,
    "billdate": "2018-12-02",
    "outlet": "CHEF BAKERS BROOKFIELD"
  },
  {
    "amount": 84501,
    "billdate": "2018-12-03",
    "outlet": "CHEF BAKERS BROOKFIELD"
  },
  {
    "amount": 81938,
    "billdate": "2018-12-04",
    "outlet": "CHEF BAKERS BROOKFIELD"
  },
  {
    "amount": 104634,
    "billdate": "2018-12-05",
    "outlet": "CHEF BAKERS BROOKFIELD"
  },
  {
    "amount": 95217,
    "billdate": "2018-12-06",
    "outlet": "CHEF BAKERS BROOKFIELD"
  },
  {
    "amount": 114856,
    "billdate": "2018-12-07",
    "outlet": "CHEF BAKERS BROOKFIELD"
  },
  {
    "amount": 104277,
    "billdate": "2018-12-08",
    "outlet": "CHEF BAKERS BROOKFIELD"
  },
  {
    "amount": 104180,
    "billdate": "2018-12-09",
    "outlet": "CHEF BAKERS BROOKFIELD"
  },
  {
    "amount": 76160,
    "billdate": "2018-12-10",
    "outlet": "CHEF BAKERS BROOKFIELD"
  },
  {
    "amount": 94503,
    "billdate": "2018-12-11",
    "outlet": "CHEF BAKERS BROOKFIELD"
  },
  {
    "amount": 87724,
    "billdate": "2018-12-12",
    "outlet": "CHEF BAKERS BROOKFIELD"
  },
  {
    "amount": 146463,
    "billdate": "2018-12-13",
    "outlet": "CHEF BAKERS BROOKFIELD"
  },
  {
    "amount": 150194,
    "billdate": "2018-12-14",
    "outlet": "CHEF BAKERS BROOKFIELD"
  },
  {
    "amount": 100765,
    "billdate": "2018-12-15",
    "outlet": "CHEF BAKERS BROOKFIELD"
  },
  {
    "amount": 96188,
    "billdate": "2018-12-16",
    "outlet": "CHEF BAKERS BROOKFIELD"
  },
  {
    "amount": 94390,
    "billdate": "2018-12-17",
    "outlet": "CHEF BAKERS BROOKFIELD"
  },
  {
    "amount": 105079,
    "billdate": "2018-12-18",
    "outlet": "CHEF BAKERS BROOKFIELD"
  },
  {
    "amount": 133846,
    "billdate": "2018-12-19",
    "outlet": "CHEF BAKERS BROOKFIELD"
  },
  {
    "amount": 151600,
    "billdate": "2018-12-20",
    "outlet": "CHEF BAKERS BROOKFIELD"
  },
  {
    "amount": 190293,
    "billdate": "2018-12-21",
    "outlet": "CHEF BAKERS BROOKFIELD"
  },
  {
    "amount": 100150,
    "billdate": "2018-12-22",
    "outlet": "CHEF BAKERS BROOKFIELD"
  },
  {
    "amount": 68592,
    "billdate": "2018-12-23",
    "outlet": "CHEF BAKERS BROOKFIELD"
  },
  {
    "amount": 128454,
    "billdate": "2018-12-24",
    "outlet": "CHEF BAKERS BROOKFIELD"
  },
  {
    "amount": 138538,
    "billdate": "2018-12-25",
    "outlet": "CHEF BAKERS BROOKFIELD"
  },
  {
    "amount": 78394,
    "billdate": "2018-12-26",
    "outlet": "CHEF BAKERS BROOKFIELD"
  },
  {
    "amount": 82636,
    "billdate": "2018-12-27",
    "outlet": "CHEF BAKERS BROOKFIELD"
  },
  {
    "amount": 70039,
    "billdate": "2018-12-28",
    "outlet": "CHEF BAKERS BROOKFIELD"
  },
  {
    "amount": 62300,
    "billdate": "2018-12-29",
    "outlet": "CHEF BAKERS BROOKFIELD"
  }
]

let formatData = function(data) {
  let billdates = [];
  let outlets = [];
  data.forEach(element => {
    if (billdates.indexOf(element.billdate) == -1) {
      billdates.push(element.billdate);
    }
    if (outlets.indexOf(element.outlet) == -1) {
      outlets.push(element.outlet);
    }
  });
  return {
    data: data,
    billdates: billdates,
    outlets: outlets,

  };
};

let renderTable = function(data) {
  billdates = data.billdates;
  outlets = data.outlets;
  data = data.data;
  let tbl = document.getElementById("tblOlSalesSummary");
  let table = document.createElement("table");
  let thead = document.createElement("thead");
  let headerRow = document.createElement("tr");
  let th = document.createElement("th");
  th.innerHTML = "BillDate";
  th.classList.add("text-center");
  headerRow.appendChild(th);
  let grandTotal = 0;
  let outletWiseTotal = {};
  th = document.createElement("th");
  th.innerHTML = "Totals";
  th.classList.add("text-center");
  headerRow.appendChild(th);
  outlets.forEach(element => {
    th = document.createElement("th");
    th.innerHTML = element;
    th.classList.add("text-center");

    headerRow.appendChild(th);
    outletWiseTotal[element] = 0;
    data.forEach(el => {
      if (el.outlet == element) {
        outletWiseTotal[element] += parseInt(el.amount);
      }
    });
    grandTotal += outletWiseTotal[element];
  });
  thead.appendChild(headerRow);
  headerRow = document.createElement("tr");
  th = document.createElement("th");
  th.innerHTML = "Total";
  th.classList.add("text-center");
  headerRow.appendChild(th);
  outlets.forEach(element => {
    th = document.createElement("th");
    th.innerHTML = outletWiseTotal[element].toLocaleString('en-in');

    th.classList.add("text-right");
    headerRow.appendChild(th);
  });
  th = document.createElement("th");
  th.innerHTML = grandTotal.toLocaleString('en-in');
  th.classList.add("text-right");
  headerRow.insertBefore(th, headerRow.children[1]);
  thead.appendChild(headerRow);
  table.appendChild(thead);
  let tbody = document.createElement("tbody");
  billdates.forEach(element => {
    let row = document.createElement("tr");
    td = document.createElement("td");
    td.innerHTML = element;
    row.appendChild(td);
    let total = 0;
    outlets.forEach(outlet => {
      let el = 0;
      data.forEach(d => {
        if (d.billdate == element && d.outlet == outlet) {
          total += parseInt(d.amount);
          el = d.amount;
        }
      });
      td = document.createElement("td");
      td.innerHTML = el.toLocaleString('en-in');
      td.classList.add("text-right");
      row.appendChild(td);
    });
    td = document.createElement("td");
    td.innerHTML = total.toLocaleString('en-in');
    td.classList.add("text-right");
    row.insertBefore(td, row.children[1]);
    tbody.appendChild(row);
  });

  table.appendChild(tbody);
  tbl.innerHTML = "";
  tbl.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");
  $(table).DataTable({
    "scrollX": true,
    "scrollY": "200px",
    "bScrollCollapse": true,
    "paging": false,
    "info": false,
    "ordering": false,
    "searching": false,
    fixedColumns: {
      leftColumns: 2,
    }
  }).columns.adjust().draw();
}
let formatedData = formatData(data);
renderTable(formatedData);

div.dataTables_wrapper {
  width: 100%;
 
  margin: 0 auto;
}
.DTFC_LeftBodyLiner {
  overflow-x:hidden 
}
.table.DTFC_Cloned {
background-color: #fff;
}
table.table-bordered>thead>tr>th {
	border: 1px solid white;
	white-space: nowrap;
	border-collapse: collapse;
	font-family: Verdana;
	font-size: 9pt;
	padding: 5px 5px 5px 5px;
	background-color: rgba(29, 150, 178, 1);
	font-weight: normal;
	text-align: center;
	color: white;
	
}


table.table-bordered>tbody>tr>td {
	border: 1px solid rgba(29, 150, 178, 1);
	white-space: nowrap;
	border-collapse: collapse;
	font-family: Verdana;
	font-size: 8pt;
	background-color: rgba(84, 83, 72, .1);
    padding: 5px 5px 5px 5px;
    color: black;
   
}

#DataTables_Table_0, .dataTables_scrollHeadInner, .dataTable  {
  width:100% !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/fc-3.2.5/fh-3.1.4/datatables.min.js"></script>
<div id="tblOlSalesSummary" class="table table-responsive"></div>

添加两个datatables固定列CSS和JS文件作为参考，其必需的：

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="https://cdn.datatables.net/fixedcolumns/3.3.1/css/fixedColumns.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.3.1/js/dataTables.fixedColumns.min.js"></script>

添加以下CSS代码：

<style>
.DTFC_LeftBodyWrapper {
    color: black !important;
    background-color: #ffffff !important;
}

.DTFC_LeftBodyLiner {
    overflow: hidden;
}
</style>

jQuery datatable代码如下：

$("#YourTable").DataTable({
        "bDestroy": true,
        "order": [],
        "fixedHeader": true,
         paging: true,
        "scrollY": 400,
        "scrollX": true,
        "scrollCollapse": true,
        "fixedColumns": {
            leftColumns: 3 //Your column number here
        },
 });

希望能帮助到别人！

在你的脚本中添加这个cdn链接
https://cdn.datatables.net/fixedcolumns/4.2.2/js/dataTables.fixedColumns.min.js
将此代码添加到数据表js代码文件中

scrollX: true,
fixedColumns:   {
  leftColumns: 1,
  rightColumns: 1,
},

HTML中有两个问题。您错过了加载FixedColumns扩展所需的样式表。而且你已经加载了默认的数据表的样式表，它不能正确地与bootstrap 4的样式一起工作。
要解决此问题，请执行以下操作：
1.转到datatables CDN页面。
1.找到名为样式选项的部分，然后单击Bootstrap 4按钮。
1.将引用的数据表CSS替换为DataTables部分提供的bootstrap 4 CSS。
1.添加另一个CSS文件到HTML中，该文件位于Extensions -〉FixedColumns部分。
您可以检查this fiddle，在应用修复后，您的代码现在可以按预期工作。
加载正确的样式表后，以下CSS也将变得不必要：
.DTFC_LeftBodyLiner { overflow-x:hidden }
溢出滚动条出现在固定列上，只是因为首先加载了不正确的CSS，这可能会提示您添加这些样式来隐藏滚动条。