Remove all Table CSS from `bookdown::gitbook`

Question

I'm toying bookdown to write some documentation for pixiedust that I feel might be a bit too lengthy for a vignette. I like the layout of bookdown::gitbook, but that, unfortunately, comes with its own table styling that is problematic for me. Since pixiedust is all about styling tables, it is a little challenging to show what pixiedust has done (or hasn't done) with the default gitbook styling.

I've tried clearing the CSS with guidance from

R bookdown gitbook - how to override table style

and

How to change the code padding effect of gitbook?

I've had no luck with putting the css code in a css file in my root directory and putting the file name in the css YAML tag. I've had no luck with making a styles subdirectory. And the version below hasn't worked either.

--- 
title: "Sample Book"
output:
  bookdown::gitbook:
    config:
      toc:
        collapse: section
        scroll_highlight: true
        before: null
        after: null
      theme: null
      css: ".book .book-body .page-wrapper .page-inner section.normal table td, .book .book-body .page-wrapper .page-inner section.normal table th { border-left: none; border-right: none; }"
---

```{r, warning = FALSE, message = FALSE, echo = FALSE}
library(pixiedust)

dust(head(mtcars))
```

Everything I've tried produces a table that looks like

What I'd like is something that looks like

At the moment, my root directory is empty save for the index.Rmd file with the code given above.

I'm using R 3.2.2 and bookdown 0.3

Answer 1

Probably not the best solution but you can remove some of the styling by replacing it with some "default" CSS in your markdown above the chunk displaying the table:

```{r results="asis", echo=FALSE}
cat("
<style>
.book .book-body .page-wrapper .page-inner section.normal table
{
  width:auto;
}
.book .book-body .page-wrapper .page-inner section.normal table td,
.book .book-body .page-wrapper .page-inner section.normal table th,
.book .book-body .page-wrapper .page-inner section.normal table tr
{
  padding:0;
  border:0;
  background-color:#fff;
}
</style>
")
```

You can look for CSS resets and add more if you need to.

Answer 2

You could define a css reset class. Either with a bunch of properties you care about or try the new all attribute if internet explorer support is not important to you.

.reset{
    all: initial;
}

Or

.reset{
    border: initial;
    padding: initial;
    ...
}

Then apply to the table:

<table class="reset">