WebHU - Programozási kérdések és válaszok

Knitr stílusú asztal CSS-szel

Biztos vagyok benne, hogy elnézek valami nyilvánvalót, de szeretném az elkészített és kable táblázataimat egyedi css-sel stílusozni.

A RMD és CSS fájlom lényegét itt találja.

Célom az volt, hogy hasznosítsak néhány olyan táblázatos CSS-példát, amelyeket itt találtam.

Amikor futtatom a jelentést, a táblázatom így néz ki:

adja meg itt a kép leírását

de a fenti CSS-példából úgy kell kinéznie, mint az alábbi képen.

adja meg itt a kép leírását

Kérdésem: Mit hiányolok, vagy ez a stílus nem lehetséges a RMarkdown használatával.

Az én RMD fájlom is alább látható:

---
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"')
```
r css r-markdown knitr
17.06.2014

Válaszok:


1

Ha előveszi az .Rmd fájlt és az alábbi módosított CSS fájlt, akkor a kívánt eredményt a következőképpen érheti el:

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

Íme az eredmény: adja meg itt a kép leírását

Íme egy frissített 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;
  }
19.06.2014
  • Kösz. Újra kezdtem, átvettem az átdolgozott CSS-edet (ami nyilvánvalóan félreértésnek tűnik részemről, igaz), és létrehoztam egy új github repo itt. A friss repo működött. Kösz! 20.06.2014
  • Az Rstudio/pandoc/knitr jelenlegi buildjeiben megadhatja a CSS-t a YAML-ben: output: html_document: css: flat-table.css 12.10.2015
  • Tamás, köszönöm a választ! Csak tudnám, hogy van-e értelme egy záradékot hozzáadni a @patrickmdnet YAML css-re vonatkozó javaslatához. 09.11.2015
  • @akhmed Nyugodtan szerkessze a választ. Nem próbáltam ki ezt a munkafolyamatot, így nem tudom, mi lenne a helyes ábrázolás. 09.11.2015

    • 2

    Ha csak kismértékben szeretne testreszabni, fontolja meg a CSS közvetlen beépítését az RMarkdown fájlba . A Markdown közvetlenül továbbítja a CSS-t, feltéve, hogy az <style> </style> be van zárva. Íme egy teljes példa:

    ---
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])
```

    adja meg itt a kép leírását

    Speciális formázás

    Ez az útmutató sok hasznos információt tartalmaz a táblázatok CSS-stílusairól. Néhány soros CSS-sel nagyszerű dolgokat érhet el. Például kiemelheti a táblázat sorát az egérmutatón:

    tbody tr:hover {
  background: yellow;
}

    adja meg itt a kép leírását

    Vegye figyelembe, hogy sok táblázatstílus a JavaScript valamilyen formáját használja a formázás működéséhez, és olyan változtatásokat is végrehajthat, amelyek hatással vannak a dokumentum többi részére. A legjobb, ha ragaszkodsz a thead és tbody címkéhez.

    18.04.2018

    3

    Tekintse meg az egyéni blokkokat:

    Van egy markdown szintaxis az attribútumok hozzáadásához.

    ::: {#id..class}
```{r showdata}
knitr::kable(yourtable)
```
:::

    E.g.

    ::: {#table .table .table-bordered}
```{r showdata}
knitr::kable(cars)
```
:::
    03.08.2020
    Új anyagok
    A rádiógomb ellenőrzött eseményének használata a jQueryben
    Ebben a cikkben látni fogjuk, hogyan kell dolgozni a jquery választógombbal ellenőrzött eseményeivel. A választógombok HTML gombok, amelyek segítenek kiválasztani egyetlen értéket egy csoportból...
    Körkörös függőségek megoldása terraformban adatforrásokkal – lépésről lépésre
    Mi az a körkörös függőségek Dolgozzunk egy egyszerű eseten, amikor az SQS-sor és az S3-vödör közötti körkörös függőség problémája van egy egymástól függő címkeérték miatt. provider..
    Miért érdemes elkezdeni a kódolást 2023-ban?
    01100011 01101111 01100100 01100101 — beep boop beep boop Világunk folyamatosan fejlődik a technológia körül, és naponta fejlesztenek új technológiákat a valós problémák megoldására. Amint..
    🎙 Random Noise #2  – Örökbefogadás és hit
    az analitika íratlan világának gondozása Szeretné, hogy ezek a frissítések a postaládájába kerüljenek? Iratkozzon fel itt . "Ha önvezető autókat gyártanak, akkor mi miért ne..
    A legrosszabb politika és prediktív modellek májátültetésre jelöltek számára az Egyesült Államokban
    A máj (vagy óangolul lifer) az emberi test legnehezebb belső szervére utal, amely csendesen működik a nap 24 órájában. Mit csinál a máj? 500 feladatot hajt végre a szervezet egészségének..
    5 webhely, amely 2022-ben fejleszti front-end fejlesztői készségeit
    Frontendmentor.io A tényleges projektek létrehozásával a Frontendmentor.io segítséget nyújt a front-end kódolási képességeinek fejlesztésében. A kódolást azután kezdheti meg, hogy..
    Mikor kell használni a Type-t az interfészhez képest a TypeScriptben?
    A TypeScript a JavaScript gépelt szuperkészlete, amely statikus gépelést ad a nyelvhez. Ez megkönnyíti a robusztus és karbantartható kód írását azáltal, hogy a hibákat a fordítási időben..