javascript - DataTables Columns Widths Do Not Resize -

I am struggling to get data for several hours despite changing the size of the table depending on the width percentage of any other

My HTML with embedded JavaScript:

  & nbsp;    
 Lt; Html & gt; & Lt; Head & gt; & Lt; Meta http-equiv = "content-type" content = "text / html; charset = UTF-8" & gt; & Lt; Meta name = "viewport" content = "width = device-width, initial-level = 1.0, maximum-level = 1.0, user-scalable = 0" & gt; & Lt; Link rel = "stylesheet" href = "// code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css"> & Lt; Script src = "// code.jquery.com/jquery-1.11.1.min.js"></script> & Lt; Script src = "// code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> & Lt; Script src = "// cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script> & Lt; Style src = "// cdn.datatables.net/1.10.5/css/jquery.dataTables.css"></style> & Lt; Script type = 'text / javascript' & gt; $ {Document} .ready (function () {table = $ ('# vol_table'). DataTable ({"sWidth": "100%", "ao column": [{sWidth: '20% '}, {sWidth ('$')}} $ ('# Vol_table tbody'). ('Click', 'tr', function () {if ($ (this) .hasClass ('selected')) {$ ( This) .removeClass ('selected');} Other {table. $ ('Tr.selected'). RemoveClass ('selected'); $ (this) .addClass ('selected');}})}}; & Lt; / Script & gt; & Lt; Style & gt; # Xouter3 {width: 80%; Limit: 1px solid # 000; Swim left; Margin: 15px 0 15px 9%; } # Xleftcol3 {float: left; Width: 15%; Background: # eff2df; } # Xmiddlecol3 {Overflow: Hidden; } * HTML # xmiddlecol3 {float: left;} * html # xmiddlecol3 # xinner3 {width: 100%;} # col2text {white-space: pre-wrap; Height: 500px; Overflow: scroll; Font-size: 0.8em; } Table, th, td {border: 1px solid black; Degradation: collapse; } # Xrightcol3 {float: true; Width: 15%; Status: Relative; }. Selected TD {background color: aqua! Important; Add / * Make sure the override datat base styles are * lt; & lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; H1 id = "title" & gt; Datababell's problem & lt; / H1> & Lt; Div id = "xouter3" & gt; & Lt; Div id = "xleftcol3" & gt; & Lt; Div id = "col1text" & gt; This column is 1 text & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "xrightcol3" & gt; & Lt; Table id = "vol_table" style = "width: 100%" & gt; & Lt; Thead & gt; & Lt; TR & gt; & Lt; Th & gt; Section & lt; / Th & gt; & Lt; Th & gt; Details & lt; / Th & gt; & Lt; / TR & gt; & Lt; / Thead & gt; & Lt; Tbody & gt; & Lt; TR & gt; & Lt; Td> 1 & lt; / Td> & Lt; Td> This is a very long line & lt; / Td> & Lt; / TR & gt; & Lt; TR & gt; & Lt; TD & gt; 2 & lt; / TD & gt; & Lt; TD & gt; AnotherLongRowWithoutWhiteSpaces & lt; / TD & gt; & Lt; / TR & gt; & Lt; / Tbody & gt; & Lt; / Table & gt; & Lt; / Div & gt; & Lt; Div id = "xmiddlecol3" & gt; & Lt; Div id = "xinner3" & gt; & Lt; Div id = "col2text" & gt; This column is 2 text & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

You can do it as follows

  "ColumnDefs": [{Target: 2, classname: 'dt-body-left', width: '200px'}