title: How to solve shiny mis-alignment issue in datatable?
body: <p>I am trying to </p>
  
  <ul>
  <li>make all columns in the datatable the same width</li>
  <li>align the datatable (both header and its content) to the left</li>
  <li>enable horizontal scrolling once it reaches mainPanel width</li>
  </ul>
  
  <p>but my datatable gets automatically centered to the mainPanel, its header and content are also misaligned.</p>
  
  <p>Example:</p>
  
  <pre><code>library(shiny)
  library(dplyr)
  library(DT)
  
  ui &lt;- fluidPage(
  
     titlePanel("Test Example"), 
  
     mainPanel(
       width = 10, 
       dataTableOutput("cars.table")
     )
  )
  
  server &lt;- function(input, output) {
     output$cars.table &lt;- renderDataTable({
        t(cars[1:10, ]) %&gt;% 
         datatable(class = "compact small", 
                   options = list(columnDefs = list(list(width = "25px", targets = "_all")), scrollX = TRUE, autoWidth = TRUE, 
                                  paging = FALSE, ordering = FALSE, searching = FALSE))
     })
  }
  
  shinyApp(ui = ui, server = server)
  </code></pre>
  
  <p>Update 2019/05/03: </p>
  
  <p>I believe <a href="https://stackoverflow.com/questions/46287971/column-headers-of-shiny-data-table-gets-shifted">this question</a> states that such issue was caused by <code>autoWidth = TRUE</code>, but there is no solution under the question, and if we want to adjust column width, we can't delete <code>autoWidth = TRUE</code> as well.</p>