Eliminate table borders in a data grid using bslib and Bootstrap design

Within my shiny app, I am implementing the yeti theme using the bslib library along with a datatable that features bootstrap styling. However, I have encountered an issue where unwanted white cell borders are appearing in the datatable when compared to utilizing other bootstrap stylings like bootstrap5 or the shinythemes library.

I attempted to resolve this by performing a CSS override, but unfortunately it did not yield the desired results:

library(shiny)
library(DT)
library(bslib)

ui <- navbarPage("A reproducible Shiny app",
  theme = bs_theme(bootswatch = "yeti"),
  tabPanel("MAIN",
    tags$style('#mytable td {cell-border:0}'),
    mainPanel(DT::dataTableOutput('mytable'))
  )
)    

server <- function(input, output,session) {
  output$mytable = DT::renderDataTable(    
    datatable(mtcars[1:3], style="bootstrap")
  ) 
}

runApp(list(ui = ui, server = server))

https://i.sstatic.net/PHSIZ.png

Answer №1

If you want to customize the bs_theme() call, you can use bs_add_rules() and include your own CSS code.

For more information, check out this github issue and the bslib documentation.

Through inspection in my browser and some trial and error, I discovered that the CSS attribute border-collapse is related to the table.dataTable{} selector. If you want to learn more about CSS, there are many resources available online. To modify just one specific table, you can use a specific selector like

#mytable dt: {border-collapse: collapse !important;}

Below is your app without the white border:

library(shiny)
library(DT)
library(bslib)

ui <- navbarPage("A reproducible Shiny app",
                         theme = bs_theme(bootswatch = "yeti") |>
                   bs_add_rules(".table.dataTable { border-collapse : collapse !important;}"),
                         tabPanel("MAIN",

                                  mainPanel(DT::dataTableOutput('mytable'))
                         )
)

server <- function(input, output,session) {
  output$mytable = DT::renderDataTable(    
    datatable(mtcars[1:3], style="bootstrap")
  ) 
}

runApp(list(ui = ui, server = server))

I hope this guidance proves useful to you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Attempting to arrange a line consisting of four individual cells

I am facing an issue while trying to create a row with 4 cells and I can't figure out why it's not working. The structure involves a parent element called row with 4 child elements. <div className='row'> <div ...

Rearrange information when the textarea is adjusted in size

One issue I am facing is that when I resize the textarea in my form, the content below the textarea does not move along with it. How can I ensure that the content moves accordingly when resizing the textarea? <form name="contactform" method="post" ...

What steps can I take to prevent a css-generated svg file from occupying more space than the original image? My wave appears to be 239px tall, while the svg file is a massive 1500px in height

I utilized an online tool to generate custom SVG CSS at this link: Upon implementing it on my webpage, the rendering seems correct in terms of height and width. However, upon inspecting the page, I noticed that the SVG file dimensions are 1512px by 1512px ...

Creating unique page styles using global styles in Next.js

I am facing a dilemma in my NextJS app. On the /home page, I need to hide the x and y overflow, while on the /books page, I want the user to be able to scroll freely. The issue is that Next only allows for one global stylesheet and using global CSS selec ...

PHP conditionals

Viewing the webpage www.evolvedtools.org/Genr8PageIntro.php, I have implemented a method to fetch blogs from my wordpress.org blog and display them on this particular page using some simple php markup: In the header of the page: <?php require('. ...

Switching HTML text by clicking or tapping on it

I'm currently working on a website that will showcase lengthy paragraphs containing complicated internal references to other parts of the text. For instance, an excerpt from the original content may read: "...as discussed in paragraph (a) of section ...

Enhance your Bootstrap navigation menu with eye-catching hover effects

Hey everyone, I'm a beginner in web development and I'm attempting to incorporate a hover effect into my navigation menu. I want it to look like the first example in this link: https://codepen.io/Calloumi/pen/vndlH I've tried to replicate t ...

Having trouble implementing an onClick event to change a button's CSS to href in Vue.js

When working with a SinglePageApp and using UIKit (UKit), I have found that I need to use a <button> tag instead of an <a> tag. Previously, the <a> tag was written like this: <a type="button" class="uk-button uk-button-link" href="#e ...

Reveal the concealed button with a jQuery click event

I have a simple question that has been elusive to find an answer for on the internet. Can anyone please help? <input hidden="true" class="btnsubmit" id="myaddslide2" onClick="UPCURSLIDE()" type="button" value="UPDATE"> <script> function ...

Improve the efficiency of computing Cartesian products of Arrays of Arrays in Perl

I am currently working on determining the probability of two items in a group sharing the same value, which is a similar scenario to the famous birthday problem (http://en.wikipedia.org/wiki/Birthday_problem). My approach involves 24 sets of three values ...

What is the method for moving one div above or below another div using the scroll bar?

Here's the scenario I'm facing: I have rows with buttons that, when clicked, reveal a set of options. The challenge is that depending on where the row is located on the page, the settings need to open either above or below the button. When the b ...

Show information from mysql in a dual-column format

I am pulling data from a single table in mysql, currently displaying it in one column. I want the data to be displayed in two columns next to each other. You can check out the results at www.urimsopa.com Here is my current code: $results = $mysqli->qu ...

nyroModal automatically adapts its dimensions according to the size of the webpage, not the size of

A situation has arisen with a link that opens an image using nyroModal. While everything is functioning correctly, the Modal window appears in the center of the page instead of aligning with the middle of the browser window. As a result, only the upper por ...

Navigational menu utilizing hamburger icon in Bootsrap 4 framework

Currently, I am developing a website and have decided to utilize Bootstrap 4 for my project. My goal is to create a navbar layout that features a hamburger menu on the left side with additional navbar items positioned on the right. As the screen size decre ...

Creating a scatter plot in R using the scatter3D() function from the plot3D package

I have a CSV file containing the following data. y,x1,x2,x3,x4,x5,x6,x7,x8,x9 10,2113,1985,38.9,64.7,4,868,59.7,2205,1917 11,2003,2855,38.8,61.3,3,615,55,2096,1575 11,2957,1737,40.1,60,14,914,65.6,1847,2175 13,2285,2905,41.6,45.3,-4,957,61.4,1903,2476 10,2 ...

Creating a seamless vertical marquee of several images that continuously scroll from bottom to top without interruption can be achieved by following these

Currently, I am seeking to design a mobile-friendly HTML page that features a border with multiple color images moving smoothly from bottom to top on both the right and left sides of the mobile screen. The transition should be seamless without any gaps o ...

CSS: The button appears to be slightly lower than the label

For more information, check out this GitHub link Here is the HTML code snippet: <div class="col-md-12"> <div class="col-md-2"> Processing </div> <div class="col-md-4"> <button class="btn btn-primary">Hello</ ...

What is the issue with the for loop break statement in R?

Here's the code I am using: nc=10 for(n in 1:n){ mergeCells(wb, 1, cols = (4*n):(4*n+3), rows = 1:1) if ((4*n)>nc) { break } } Unfortunately, I encountered the following error: Merge intersects with existing merged cells: L1:Q ...

What are some effective ways to prevent a sidebar layout from scrolling in bootstrap?

I'm working on creating a simple admin panel and have set up a sidebar layout. My goal is to keep the sidebar fixed so that it doesn't scroll when I scroll down the page. Initially, it looks like this: https://i.sstatic.net/dcFX3.png However, a ...

How can I center the navbar logo and use it as a toggle for collapsing the menu?

This is a simple example of a navigation bar <nav class="navbar navbar-expand-lg bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class ...