R Shiny space between two tables

Question

I'm using R and Shiny and trying to display two dataTableOutput elements next to each other. In order to achieve this I'm using the fluidRow column feature but I need to additional customize the width of these two tables. This is my code:

# this chunk of code makes the pagination buttons smaller
tags$style(HTML(".dataTables_wrapper_aa .dataTables_paginate .paginate_button {
                                         min-width: 0.5em !important; 
                                         padding: 0.1em .5em !important;
                                         } 
                                         ")),
                         
                         # 
                         tags$style(HTML(".pagination_aa {
                                                          display: inline-block !important;
                                                          }
                                            
                                            .pagination_aa a {
                                            color: black !important;
                                            float: left !important;
                                            padding: 8px 16px !important;
                                            text-decoration: none !important;
                                            font-size: 12px !important;
                                            }
                                         ")),

                         # this chunk code of code should customize and make the two tables extremely tight (it's a test) but in reality it doesn't do anything, why?
                         tags$style(HTML(".optim_mp_table02 .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
                                                    border-collapse: collapse;
                                                    width: 10px !important;
                                         }
                                         "))

then, this is how I use the tags above:

fluidRow(column(width = 3,
                                       offset = 0, # this seems useless
                                       style='padding:10px;', # this seems useless
                                       tags$div(class="dataTables_wrapper_aa pagination_aa", 
                                       DT::dataTableOutput(outputId="table01angelo", 
                                       width = '10px' # this seems useless
))),
                                    column(width  = 3
                                           #,offset = 0
                                           #,style='padding:10px;',
                                           ,tags$div(class="dataTables_wrapper_aa pagination_aa optim_mp_table02", 
                                                    DT::dataTableOutput(outputId="table02angelo", width = '10px')))
                                    ))

I tried a ton of combinations (bear in mind I'm an html/css newbie) and also read these two questions shiny fluidrow column white space and Controlling table width in Shiny dataTableOutput but somehow I get two overlapping tables, By the way. I could solve this problem by using column width = 4 but that would take too much space, Since the tot number of columns available is 12. I need ultimately to have 4 tables that will take 3 columns each. I'm also attaching a screenshot. Thank you for the help

One final addition, in case this could be of help. Both tables are created precisely in this way:

output$table01angelo <- DT::renderDataTable({  
  df <- get_mp_data()
  if(is.null(df)){
    df <- data.frame()
  }else{
    upcolor = "lightblue"
    downcolor = "lightblue"
    col_name = "CHG"
    df <- datatable(df
                    , rownames = FALSE 
                    , caption = paste0("Pre/Post Duration")
                    , filter = 'none'
                    , options = list(scrollX = F
                                     #, lengthChange = FALSE  # this feature hides the "Show Entries" on top of the table, so we won't be able to customize how many entries we can see all together
                                     , language = list(lengthMenu = "_MENU_") # this feature hides the text "Show Entries" but does keep the dropdown box to change the # rows per page
                                     , pagingType = "numbers"  # this hides the Next and Previous buttons -->  https://datatables.net/reference/option/pagingType
                                     , autoWidth = T
                                     ,pageLength = 5 # this determines how many rows we want to see per page
                                     , info = FALSE #  this will hide the "Showing 1 of 2..." at the bottom of the table -->  https://stackoverflow.com/questions/51730816/remove-showing-1-to-n-of-n-entries-shiny-dt
                                     ,searching = FALSE  # this removes the search box  ->  https://stackoverflow.com/questions/35624413/remove-search-option-but-leave-search-columns-option
                                     ,columnDefs = list(list(width = '4', targets = c(3) ) 
                                                        ,list(width = '4', targets = c(2) )
                                     )   # careful, column counting STARTS FROM 0 !
                    )) %>% 
      formatStyle(col_name,
                  #background = styleColorBar(range(df[, c(col_name)]), 'lightblue'),
                  background = color_from_middle(df[, c(col_name)] , downcolor,   upcolor),
                  backgroundSize = '98% 88%',
                  backgroundRepeat = 'no-repeat',
                  backgroundPosition = 'center')
  }
  return(df)
})

Answer 1

Your program seems to be working fine, if I use the generic dataframe mtcars . Please see the output when I select only 4 variables from mtcars:

However, if I choose 6 variables, I get the following output:

Here 6th column of table 1 is behind the first column of table 2. As you wish to display each table occupying 25% of the width of the page, you cannot display too many columns as the option autoWidth=T sets certain width for each column within the table.

Perhaps you should look at the answer by @Stephane Laurent here , and define css above ui and columnDefs with nowrap

As suggested by @DanWaters, if you allow scrolling, you can get the following output: