CODEWITHSUNDEEP
cssrknitr
Ignacio
Ignacio

Reputation: 7928

Custom Table with R Markdown v2 and ioslides

I'm doing a presentation with R Markdown v2 and ioslides. The font that I get in the tables by default is a little too small.

For example:

---
title: "Never put off 'till tomorrow?"
author: "Ignacio Martinez"
date: "09/23/2014"
output:
  ioslides_presentation:
    incremental: yes
    css: ./styles.css
    logo: ./img/rotunda.png 
    widescreen: yes
    self_contained: true
    font-import: http://fonts.googleapis.com/css?family=Ubuntu
    font-family: Ubuntu
runtime: shiny

---

## Estimates (OLS)

|                    |          Certificate|
|-------------------:|--------------------:|
|Took Quiz 1 on Day 1|          0.154\*\*\*|
|                    |          (0.003)    |
|Constant            |          0.006\*\*\*|
|                    |          (0.002)    |
|N                   |               23,463|

How can I increase the font size?

Upvotes: 5

Views: 2280

Answers (1)

user2554330
user2554330

Reputation: 44788

I don't like the colour scheme or spacing of the default CSS file, so I wrote this one. It works in both ioslides_presentation and html_document.

table,
.table-condensed,
table.rmdtable {
  width: auto;
  margin-left: auto;
  margin-right: auto;
}
table,
.table-condensed,
table.rmdtable,
table.rmdtable .header th,
.table > thead > tr > th {
  border-collapse: collapse;
  border-style: solid;
  border-spacing: 0;
  border-width: medium 0 medium 0;
  border-color: inherit
}
table.rmdtable th,
table.rmdtable td,
table th,
table.rmdtable tr > td:first-child,
table.rmdtable .even {
  font-size: 100%;
  padding: 0.4em 0.5em;
  color: inherit;
  background: #FFF;
  font-weight: normal;
}
.table > tbody > tr > td {
  border-width: 0;
}

If you want to modify other things, you can examine the existing values and play with them in most browsers. In Firefox, you right click on the thing you want to change, and choose "Inspect Element". The source will pop up and the element will be highlighted; the active CSS is shown on the right. You can deactivate parts of it to see what effect they have.

Upvotes: 7

Related Questions