Setting Table Column Width

Setting table column width

<table style="width: 100%">    <colgroup>       <col span="1" style="width: 15%;">       <col span="1" style="width: 70%;">       <col span="1" style="width: 15%;">    </colgroup>                <!-- Put <thead>, <tbody>, and <tr>'s here! -->    <tbody>        <tr>            <td style="background-color: #777">15%</td>            <td style="background-color: #aaa">70%</td>            <td style="background-color: #777">15%</td>        </tr>    </tbody></table>

Set the table column width constant regardless of the amount of text in its cells?

I played with it for a bit because I had trouble figuring it out.

You need to set the cell width (either th or td worked, I set both) AND set the table-layout to fixed. For some reason, the cell width seems to only stay fixed if the table width is set, too (I think that's silly but whatev).

Also, it is useful to set the overflow property to hidden to prevent any extra text from coming out of the table.

You should make sure to leave all of the bordering and sizing for CSS, too.

Ok so here's what I have:

table {  border: 1px solid black;  table-layout: fixed;  width: 200px;}
th,td {  border: 1px solid black;  width: 100px;  overflow: hidden;}

<table>  <tr>    <th>header 1</th>    <th>header 234567895678657</th>  </tr>  <tr>    <td>data asdfasdfasdfasdfasdf</td>    <td>data 2</td>  </tr></table>

How to set independent table column widths using renderTable()?

You need to first set autoWidth to FALSE and then you can specify different width for different columns by using the targets option. The first column is indexed as 0.

library(dplyr)
library(DT)
library(shiny)
library(shinyWidgets)
library(tidyverse)

ui <-
  fluidPage(
    fluidRow(
      column(width = 8,
             h3("Data table:"),
             tableOutput("data"),
             h3("Sum the data table columns:"),
             radioButtons(
               inputId = "grouping",
               label = NULL,
               choiceNames = c("By period 1", "By period 2"),
               choiceValues = c("Period_1", "Period_2"),
               selected = "Period_1",
               inline = TRUE
             ),
             DT::dataTableOutput("sums")
      )
    )
  )

server <- function(input, output, session) {
  data <- reactive({
    data.frame(
      Period_1 = c("2020-01", "2020-02", "2020-03", "2020-01", "2020-02", "2020-03"),
      Period_2 = c(1, 2, 3, 3, 1, 2),
      ColA = c(1000.01, 20, 30, 40, 50, 60),
      ColB = c(15.06, 25, 35, 45, 55, 65)
    )
  })
  
  colNames <- reactive({c(stringr::str_replace(input$grouping, fixed("_"), " "), "Col A", "Col B") })
  
  summed_data <- reactive({
    data() %>%
      group_by(!!sym(input$grouping)) %>%
      select("ColA","ColB") %>%
      summarise(across(everything(), sum))
  })
  
  output$data <- renderTable(data())
  
  output$sums <- renderDT({
    summed_data() %>% 
      datatable(
        rownames = FALSE,
        colnames=colNames(), 
        options = list(
          autoWidth = FALSE,
          columnDefs = list(
            list(width = '35px', targets = c(0)),
            list(width = '150px', targets = c(1,2)))
        )
      )
  })
  
}

shinyApp(ui, server)

Set column width in table with CSS without using col or changing the HTML

Assuming that you want to define both columns as having a different width, you can style it using nth-child.

.articleTable tr td:first-child {
 width: 50px;
}

.articleTable tr td:nth-child(2) {
 width: 180px;
}

I hope this helps.

Here's a JSFiddle so you can see: http://jsfiddle.net/54z0ssgt/

Note: I've commented out the width: 100% applied to the table so you can see the columns sized by the defined pixels.

Edit:

To accommodate IE8, I've modified the CSS.

.articleTable tr td:first-child {
 width: 50px;
}

.articleTable tr td:first-child + td {
 width: 180px;
}

Working JSFiddle: http://jsfiddle.net/zmoLuh6v/

Table column widths ignored

Your embedded table is showing the same width for all columns not because it is an embedded table, but because its cells contain input elements that do not have a specified width. Because of this lack of specification, they are adopting the default style specifications from the web browser. To make your table cells match your specified column widths, you can add the following CSS. Depending on the context of other input elements on your webpage, you may want to use a more specific selector.

input {
    width: 100%;
}

Setting Table Column Width