Fix DataTables horizontal scrolling (scrollX) in sidebar (flex row)

- remove Bootstrap "table" class, "width: 100%" prevents scrolling,
  not needed anyway (?), seems to have no effects otherwise
- override margin auto with 0 to avoid table taking more space at
  margins than needed and getting misaligned (centered and header left)
  see also https://github.com/DataTables/DataTables/issues/539
- refactoring: use classes instead of ids

css/style.css

@@ -12,7 +12,7 @@ body, #content {
 
 .flexcolumn,
 .leaflet-sidebar-pane.active,
-#datatable_wrapper,
+.dataTables_wrapper,
 .dataTables_scroll,
 .dataTables_scrollBody {
     display: -webkit-box;
@@ -43,10 +43,10 @@ body, #content {
 }
 
 /* 'auto' (1 1 auto) instead of '1' (1 1 0) needed for DataTables tab in Firefox */
-#datatable_wrapper,
+.dataTables_wrapper,
 .dataTables_scroll,
 .dataTables_scrollBody,
-#datatable {
+table.dataTable {
     -webkit-box-flex: auto;
     -moz-box-flex: auto;
     -webkit-flex: auto;
@@ -225,6 +225,11 @@ https://css-tricks.com/svg-line-animation-works/
 * DataTables
 */
 
+table.dataTable {
+    /* avoid getting centered and header misaligned with flex row (sidebar) */
+    margin: 0;
+}
+
 table.dataTable.mini thead th,
 table.dataTable.mini thead td {
     padding: 3px 13px 3px 2px;

index.html

@@ -206,7 +206,7 @@
 
                     <div class="leaflet-sidebar-pane" id="tab_data">
                         <h1 class="leaflet-sidebar-header">Data<span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
-                        <table id="datatable" class="table mini cell-border hover stripe"></table>
+                        <table id="datatable" class="mini cell-border hover stripe"></table>
                     </div>
 
                     <div class="leaflet-sidebar-pane" id="tab_itinerary">