web-dev-qa-db-ja.com

CSSを使用したニットスタイルのテーブル

明らかなことを見落としていることは確かですが、作成したテーブルとkableをカスタムcssでスタイル設定したいと思います。

私のRMDファイルとCSSファイルの要点を見つけることができます ここ 。

私の目標は、私が見つけたテーブルCSSの例のいくつかを活用することでした ここ 。

レポートを実行すると、テーブルは次のようになります。

enter image description here

ただし、上記のCSSの例から、次の画像のようになります。

enter image description here

私の質問：何が欠けているのですか、それともこのレベルのスタイリングはRMarkdownでは不可能ですか。

私のRMDファイルも以下に示されています。

---
title: "Test Table CSS"
output: 
  html_document:
    theme: NULL
    style: flat-table.css
---

I want to be able to style my tables with CSS. From the looks of it, I should be able to do that 
through the use of `CSS` and `knitr:kable`.  


```{r setup, echo=FALSE}
data(mtcars)
mt_head = head(mtcars[, 1:5])
```

I want to be able to style my table just like one found [here](http://codepen.io/njessen/pen/naLCv)


```{r echo=FALSE, results='asis'}
library(knitr)
kable(mt_head, "html", table.attr='class="flat-table"')
```
cssrknitrr-markdown
25
Btibert3

以下の.Rmdファイルと変更されたCSSファイルを使用すると、次の方法で目的の結果を得ることができます。

knitr::knit2html('my-report.RMD', stylesheet = 'flat-table.css')

結果は次のとおりです。 enter image description here

これが更新されたflat-table.css：

.flat-table {
  display: block;
  font-family: sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 115%;
  overflow: auto;
  width: auto;
}
  th {
    background-color: rgb(112, 196, 105);
    color: white;
    font-weight: normal;
    padding: 20px 30px;
    text-align: center;
  }
  td {
    background-color: rgb(238, 238, 238);
    color: rgb(111, 111, 111);
    padding: 20px 30px;
  }
28
Thomas

実行したいカスタマイズが少ししかない場合は、 RMarkdownファイル内に直接CSSを含む を検討できます。マークダウンは、CSSが囲まれている場合、CSSを直接​​通過します<style> </style>。完全な例を次に示します。

---
output: html_document
---

# Test Project

<style>
  .flat-table {
    display: block;
    font-family: sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 115%;
    overflow: auto;
    width: auto;
  }
  thead {
    background-color: rgb(112, 196, 105);
    color: white;
    font-weight: normal;
    padding: 20px 30px;
    text-align: center;
  }
  tbody {
    background-color: rgb(238, 238, 238);
    color: rgb(111, 111, 111);
    padding: 20px 30px;
  }
</style>



```{r}
knitr::kable(mtcars[1:5, 1:5])
```

enter image description here

高度なフォーマット

このガイド テーブルのCSSスタイルに関する多くの有用な情報を提供します。あなたはCSSの数行でいくつかのクールなことを達成することができます。たとえば、ホバーでテーブルの行を強調表示することができます。

tbody tr:hover {
  background: yellow;
}

enter image description here

多くのテーブルスタイルは、何らかの形式のJavaScriptを使用してフォーマットを機能させ、ドキュメントの残りの部分に影響を与える変更を加える場合があることに注意してください。 theadタグとtbodyタグに固執するのが最善です。

1
Michael Harper