Reduce the width of the control column for narrow column tables

rpmccormick

Does anyone know how to reduce the width of the control column?

If the empty blue part was gone the green would be almost half size.
I tried a few css tricks with width and margin, but no luck yet.

rpmccormick

Actually, I probably need to upgrade everything. It's been a while, and I see all your demos now have a triangle instead of the green + / red -
Someday soon I should get to that.

allan

If you could link to the page I might be able to say what is happening - it looks like you might have a - in the content? Can you remove that (if there is one there) and it will then collapse down like in the examples.

Allan

rpmccormick

I think the old (+) style just has extra width.

I initialize all tables with code like this (no extra - character):

  $dtControlColumn= '{className: \'control\', defaultContent: \'\', orderable: false}';


  //--------------------------------------------------------------------------|| 
  //RoomStay for Pages - Includes Booking Name Logo and Party Name / Count
  function initRoomStaysTable(tblName='RoomStays')
   {$('#tbl'+tblName).dataTable({<?=$dtSimplePaging?>
                                 <?=$dtResponsive?>
                                 <?=$dtExportBtn?>
      order: [[3, 'desc'],
              [2, 'asc' ]
             ], 
   ordering: true,
    columns: [<?php echo $dtControlColumn;
              printColumnRender('RoomStay_Room'  );
              printColumnRender('RoomStay_Guest' );
              printColumnRender('RoomStay_Action'       , false);
              printColumnRender('RoomStay_RoomDetails'  , false);
              printColumnRender('RoomStay_BookDetails'  , false);
              printColumnRender('RoomStay_ChargeDetails', false);
              printColumnRender('RoomStay_StayDetails'  , false);
              printColumnRender('RoomStay_RateDetails'  , false);
              printColumnRender('RoomStay_GuestDetails' , false);
              printColumnRender('RoomStay_DBDetails'    , false);
   ?>]});}
  //--------------------------------------------------------------------------|| 


  //--- PHP HTML Generators --------------------------------------------------\\
  function genColumnRender($renderName, $orderable=true)
   {$col = ', {className: \'dt-center\', render: renderDT_'.$renderName;
    if ($orderable==false) {$col.= ', orderable: false';}
    return $col.'}';
   }
  //--------------------------------------------------------------------------||
  function printColumnRender($renderName, $orderable=true)
   {echo ', {className: \'dt-center\', render: renderDT_'.$renderName;
    if ($orderable==false) {echo ', orderable: false';}
    echo   '}';
   }
  //--- END PHP HTML Generators ----------------------------------------------//

malban

You can use width in columns:

var table = $('#yourtable').DataTable( {. . . "select": { style: 'os', selector: 'td:not(:first-child)'}, "columns": [ { className: 'details-control', orderable: false, data: null, defaultContent: '', width: '5%' }, //... "columnDefs": [ {"targets": 0,"className": "text-center", "searchable": false,"width": "1%" },