JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/dt-1.10.15/r-2.1.1/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/jqc-1.12.4/dt-1.10.15/r-2.1.1/datatables.min.js"></script>
<table id="test-table" class="display table table-hover table-bordered" cellspacing="0" width="100%"></table>

CSS

#test-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

#test-table th, #test-table td {
  border: 1px solid black;
}

JavaScript

$(function () {
  $('#test-table').DataTable({
    columns: [
      { title: 'a', width: '20%' },
      { title: 'b', width: '20%' },
      { title: 'c', width: '20%' },
      { title: 'd', width: '20%' },
      { className: 'control', width: '20%', orderable: false },
    ],
    responsive: {
      details: {
        type: 'column',
        target: -1,
      },
    },
    //                responsive: false, // TODO With responsive set to "false", everything's fine.
    paging: false,
    info: false,
    sDom: '<"H"lr>t<"F"ip>',
  });

  $('#test-table').DataTable().rows.add([
    [
      1, 2, 3, 4, '',
    ],
  ]);
  $('#test-table').DataTable().draw();
});