DataTableResize

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link href="https://cdn.datatables.net/v/dt/jszip-3.10.1/dt-2.3.4/af-2.7.1/b-3.2.5/b-colvis-3.2.5/b-html5-3.2.5/b-print-3.2.5/cr-2.1.1/cc-1.1.0/date-1.6.0/fc-5.0.5/fh-4.0.4/kt-2.12.1/r-3.0.7/rg-1.6.0/rr-1.5.0/sc-2.4.3/sb-1.8.4/sp-2.3.5/sl-3.1.1/sr-1.4.2/datatables.min.css" rel="stylesheet" integrity="sha384-A27rDoIbOuNVe/hby4lc/dgcWCVTGyp+3RR914rQYIXwEc3t+rH43y0k+X23h65N" crossorigin="anonymous">



<div class="d-flex justify-content-center">
  <div class="card">
    <div class="card-header"><h4>Outer Card</h4></div>
    <div class="card-body">
      <div class="card">
        <div class="card-header"><h4>Table Test</h4></div>
        <div class="card-body">
          <div id="tableSearch">
            <table id="testTable" style="width: 100%">
              <tbody>
                <tr>
                  <td></td>
                  <td>TestUser1</td>
                  <td>Testy Testerson</td>
                  <td>MO1234</td>
                </tr>
                <tr>
                  <td></td>
                  <td>TestUser2</td>
                  <td>Testy Testerson</td>
                  <td>MO1234</td>
                </tr>
                <tr>
                  <td></td>
                  <td>TestUser3</td>
                  <td>Testy Testerson</td>
                  <td>MO1234</td>
                </tr>
                <tr>
                  <td></td>
                  <td>TestUser4</td>
                  <td>Testy Testerson</td>
                  <td>MO1234</td>
                </tr>
                <tr>
                  <td></td>
                  <td>TestUser5</td>
                  <td>Testy...

CSS

.width30 {width: 2.9em!important; }
.center { text-align: center!important; }
.noWrap {white-space:nowrap!important;}
.largeIcon { font-size: 1.2rem!important; }
.pointer { cursor: pointer!important; }

.dt-container>.dt-length, .dataTables_wrapper .dataTables_length { margin-top: 2px!important; display: inline-block!important; margin-right: 20px!important; float: left!important; clear:left!important; }
div.dt-container>div.dt-search, div.dataTables_wrapper div.dataTables_filter { float: right!important; }
div.dt-container div.dt-buttons button.dt-button, div.dt-container button, .dataTables_wrapper button { display: inline-block!important; font-size: 1.1em!important; min-height: 38px!important; text-align: center!important; white-space: nowrap!important; vertical-align: middle!important; touch-action: manipulation!important; cursor: pointer!important; user-select: none!important; border-radius: 4px!important; }
.dt-container label, .dataTables_wrapper label { font-weight: 400!important; /*margin-left: 10px;*/ }
.dt-container .dt-search input, .dataTables_wrapper .dataTables_filter input { border: 1px solid #585858!important; border-radius: 4px!important; padding: 3px 6px!important; }
.dt-container .dt-paging .paginate_button, .dataTables_wrapper .dataTables_paginate .paginate_button { padding: 0.3em 0.8em!important; }
div.dt-container>div.dt-info { clear: both!important; float: left!important; padding-top: .755em!important; }
div.dt-container>div.dt-paging { float: right!important;  padding-top: .25em!important; }
div.dt-container:after { content: ''!important; display: block!important; clear: both!important; }
tfoot span.dt-column-title { display: flex!important; }
button.dt-paging-button.previous:not(.disabled) { font-weight: 900!important; }
button.dt-paging-button.next:not(.disabled) { font-weight: 900!important; }
.dt-container .dt-length, .dataTables_wrapper .dataTables_length, .dt-container .dt-search, .dataTables_wrapper...

JavaScript

var testTable = $('#testTable').DataTable({
	"autoWidth": true,
	"pageLength": 15,
	"lengthChange": true,
	"data": null,
	"language": {
		"emptyTable": "No Users Found"
	},
	"paging": true,
	"columnDefs": [
		{
			"targets": [1, 2, 3],
			"columnControl": [{ "target": 0, "content": ["orderStatus", ["title", "orderAsc", "orderDesc", "orderRemove", "orderClear", "orderAddAsc", "orderAddDesc"]] }, { "target": "tfoot", "content": ["search"] }]
		}
	],
	"ordering": {
		"indicators": false,
		"handler": true
	},
	"columns": [
		{ "className": "noPrint noPaddingCell", "orderable": false, "render": DataTable.render.select() },
		{ "title": "UserID" },
		{ "title": "Name", className: 'noWrap' },
		{ "title": "Agency" },
    {
			"className": "center width30", "orderable": false,
			"render": function (data, type, row, meta) {
				return '<a href="#" class="edit_user" title="Edit User"><i class="fa fa-pencil largeIcon pointer"></i></a>';
			}
},
{
			"className": "center width30", "orderable": false,
			"render": function (data, type, row, meta) {
				return '<a href="#" class="copy_user" title="Copy to a New User"><i class="fa fa-copy largeIcon pointer"></i></a>';
			}
},
{
			"className": "center width30", "orderable": false,
			"render": function (data, type, row, meta) {
				return '<a href="#" class="clone_user" title="Clone User to Myself"><i class="fa fa-user-friends largeIcon pointer"></i></a>';
			}
}
	],
	"select": {
		"style": "multi+shift",
		"selector": "tr",
		"headerCheckbox": true
	},
	"order": [[2, "asc"]],
	"layout": {
		"top2Start": {
			"buttons": [
				{
					"extend": "selectAll",
					"text": "Select All",
					"className": "greyButton"
				},
				{
					"extend": "selectNone",
					"text": "Deselect All",
					"className": "greyButton"
				},
				{
					"extend": "spacer",
					"text": "Export:"
				},
				{
					"extend": "csvHtml5",
					"text": "Excel",
					"exportOptions":...