change from div to span for background color in cell_spec
diff --git a/R/cell_spec.R b/R/cell_spec.R
index d83a8b1..7b7f00a 100644
--- a/R/cell_spec.R
+++ b/R/cell_spec.R
@@ -89,7 +89,7 @@
hover_message <- paste0("data-toggle='tooltip' title='", hover_message, "'")
}
out <- paste0(
- '<div style="', cell_style, '"', hover_message, '>', x, '</div>'
+ '<span style="', cell_style, '"', hover_message, '>', x, '</span>'
)
return(out)
}
diff --git a/docs/use_kableExtra_with_formattable.Rmd b/docs/use_kableExtra_with_formattable.Rmd
index d145e31..72650cd 100644
--- a/docs/use_kableExtra_with_formattable.Rmd
+++ b/docs/use_kableExtra_with_formattable.Rmd
@@ -46,8 +46,8 @@
```{r}
iris[1:10, ] %>%
mutate_if(is.numeric, function(x){
- cell_spec(x, "html", bold = T, color = spec_color(x), font_size = spec_font_size(x))
+ cell_spec(x, "html", color = spec_color(x), bold = T)
}) %>%
kable("html", escape = F, align = "c") %>%
- kable_styling(full_width = F)
+ kable_styling("condensed", full_width = F)
```
diff --git a/docs/use_kableExtra_with_formattable.html b/docs/use_kableExtra_with_formattable.html
index d0b54d4..add363a 100644
--- a/docs/use_kableExtra_with_formattable.html
+++ b/docs/use_kableExtra_with_formattable.html
@@ -188,14 +188,10 @@
<span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffcc6f">21.0</span>
</td>
<td style="text-align:left;">
-<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg);">
-6
-</div>
+<span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg);">6</span>
</td>
<td style="text-align:left;">
-<div style=" font-style: italic;color: green;">
-160
-</div>
+<span style=" font-style: italic;color: green;">160</span>
</td>
<td style="text-align:left;width: 3cm; display: inline-block; ">
<span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 62.86%">110</span>
@@ -209,14 +205,10 @@
<span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffcc6f">21.0</span>
</td>
<td style="text-align:left;">
-<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg);">
-6
-</div>
+<span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg);">6</span>
</td>
<td style="text-align:left;">
-<div style=" font-style: italic;color: green;">
-160
-</div>
+<span style=" font-style: italic;color: green;">160</span>
</td>
<td style="text-align:left;width: 3cm; display: inline-block; ">
<span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 62.86%">110</span>
@@ -230,14 +222,10 @@
<span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffa500">22.8</span>
</td>
<td style="text-align:left;">
-<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);">
-4
-</div>
+<span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);">4</span>
</td>
<td style="text-align:left;">
-<div style=" font-style: italic;color: green;">
-108
-</div>
+<span style=" font-style: italic;color: green;">108</span>
</td>
<td style="text-align:left;width: 3cm; display: inline-block; ">
<span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 53.14%">93</span>
@@ -251,14 +239,10 @@
<span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffc357">21.4</span>
</td>
<td style="text-align:left;">
-<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); -ms-transform: rotate(240deg); -o-transform: rotate(240deg); transform: rotate(240deg);">
-6
-</div>
+<span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); -ms-transform: rotate(240deg); -o-transform: rotate(240deg); transform: rotate(240deg);">6</span>
</td>
<td style="text-align:left;">
-<div style=" font-weight: bold;color: red;">
-258
-</div>
+<span style=" font-weight: bold;color: red;">258</span>
</td>
<td style="text-align:left;width: 3cm; display: inline-block; ">
<span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 62.86%">110</span>
@@ -272,14 +256,10 @@
<span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffffff">18.7</span>
</td>
<td style="text-align:left;">
-<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -ms-transform: rotate(300deg); -o-transform: rotate(300deg); transform: rotate(300deg);">
-8
-</div>
+<span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -ms-transform: rotate(300deg); -o-transform: rotate(300deg); transform: rotate(300deg);">8</span>
</td>
<td style="text-align:left;">
-<div style=" font-weight: bold;color: red;">
-360
-</div>
+<span style=" font-weight: bold;color: red;">360</span>
</td>
<td style="text-align:left;width: 3cm; display: inline-block; ">
<span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 100.00%">175</span>
@@ -294,11 +274,11 @@
<p>I also added a few helper functions to use together with cell_spec. One good example is <code>spec_color</code>, which gives you the ability to use viridis color map in your table. Others include <code>spec_font_size</code> and <code>spec_angle</code>.</p>
<pre class="r"><code>iris[1:10, ] %>%
mutate_if(is.numeric, function(x){
- cell_spec(x, "html", bold = T, color = spec_color(x), font_size = spec_font_size(x))
+ cell_spec(x, "html", color = spec_color(x), bold = T)
}) %>%
kable("html", escape = F, align = "c") %>%
- kable_styling(full_width = F)</code></pre>
-<table class="table" style="width: auto !important; margin-left: auto; margin-right: auto;">
+ kable_styling("condensed", full_width = F)</code></pre>
+<table class="table table-condensed" style="width: auto !important; margin-left: auto; margin-right: auto;">
<thead>
<tr>
<th style="text-align:center;">
@@ -321,24 +301,16 @@
<tbody>
<tr>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(66, 190, 113, 1);font-size: 17px;">
-5.1
-</div>
+<span style=" font-weight: bold;color: rgba(66, 190, 113, 1);">5.1</span>
</td>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(34, 168, 132, 1);font-size: 16px;">
-3.5
-</div>
+<span style=" font-weight: bold;color: rgba(34, 168, 132, 1);">3.5</span>
</td>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);font-size: 12px;">
-1.4
-</div>
+<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);">1.4</span>
</td>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 13px;">
-0.2
-</div>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
</td>
<td style="text-align:center;">
setosa
@@ -346,24 +318,16 @@
</tr>
<tr>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 15px;">
-4.9
-</div>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">4.9</span>
</td>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(72, 37, 118, 1);font-size: 11px;">
-3
-</div>
+<span style=" font-weight: bold;color: rgba(72, 37, 118, 1);">3</span>
</td>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);font-size: 12px;">
-1.4
-</div>
+<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);">1.4</span>
</td>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 13px;">
-0.2
-</div>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
</td>
<td style="text-align:center;">
setosa
@@ -371,24 +335,16 @@
</tr>
<tr>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(53, 95, 141, 1);font-size: 13px;">
-4.7
-</div>
+<span style=" font-weight: bold;color: rgba(53, 95, 141, 1);">4.7</span>
</td>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(52, 96, 141, 1);font-size: 13px;">
-3.2
-</div>
+<span style=" font-weight: bold;color: rgba(52, 96, 141, 1);">3.2</span>
</td>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(68, 1, 84, 1);font-size: 10px;">
-1.3
-</div>
+<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);">1.3</span>
</td>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 13px;">
-0.2
-</div>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
</td>
<td style="text-align:center;">
setosa
@@ -396,24 +352,16 @@
</tr>
<tr>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(65, 68, 135, 1);font-size: 12px;">
-4.6
-</div>
+<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);">4.6</span>
</td>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(65, 68, 135, 1);font-size: 12px;">
-3.1
-</div>
+<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);">3.1</span>
</td>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 15px;">
-1.5
-</div>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">1.5</span>
</td>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 13px;">
-0.2
-</div>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
</td>
<td style="text-align:center;">
setosa
@@ -421,24 +369,16 @@
</tr>
<tr>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(34, 168, 132, 1);font-size: 16px;">
-5
-</div>
+<span style=" font-weight: bold;color: rgba(34, 168, 132, 1);">5</span>
</td>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(68, 191, 112, 1);font-size: 17px;">
-3.6
-</div>
+<span style=" font-weight: bold;color: rgba(68, 191, 112, 1);">3.6</span>
</td>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);font-size: 12px;">
-1.4
-</div>
+<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);">1.4</span>
</td>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 13px;">
-0.2
-</div>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
</td>
<td style="text-align:center;">
setosa
@@ -446,24 +386,16 @@
</tr>
<tr>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(253, 231, 37, 1);font-size: 20px;">
-5.4
-</div>
+<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);">5.4</span>
</td>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(253, 231, 37, 1);font-size: 20px;">
-3.9
-</div>
+<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);">3.9</span>
</td>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(253, 231, 37, 1);font-size: 20px;">
-1.7
-</div>
+<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);">1.7</span>
</td>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(253, 231, 37, 1);font-size: 20px;">
-0.4
-</div>
+<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);">0.4</span>
</td>
<td style="text-align:center;">
setosa
@@ -471,24 +403,16 @@
</tr>
<tr>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(65, 68, 135, 1);font-size: 12px;">
-4.6
-</div>
+<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);">4.6</span>
</td>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 15px;">
-3.4
-</div>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">3.4</span>
</td>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);font-size: 12px;">
-1.4
-</div>
+<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);">1.4</span>
</td>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(53, 183, 121, 1);font-size: 17px;">
-0.3
-</div>
+<span style=" font-weight: bold;color: rgba(53, 183, 121, 1);">0.3</span>
</td>
<td style="text-align:center;">
setosa
@@ -496,24 +420,16 @@
</tr>
<tr>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(34, 168, 132, 1);font-size: 16px;">
-5
-</div>
+<span style=" font-weight: bold;color: rgba(34, 168, 132, 1);">5</span>
</td>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 15px;">
-3.4
-</div>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">3.4</span>
</td>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 15px;">
-1.5
-</div>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">1.5</span>
</td>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 13px;">
-0.2
-</div>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
</td>
<td style="text-align:center;">
setosa
@@ -521,24 +437,16 @@
</tr>
<tr>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(68, 1, 84, 1);font-size: 10px;">
-4.4
-</div>
+<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);">4.4</span>
</td>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(68, 1, 84, 1);font-size: 10px;">
-2.9
-</div>
+<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);">2.9</span>
</td>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);font-size: 12px;">
-1.4
-</div>
+<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);">1.4</span>
</td>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 13px;">
-0.2
-</div>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
</td>
<td style="text-align:center;">
setosa
@@ -546,24 +454,16 @@
</tr>
<tr>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 15px;">
-4.9
-</div>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">4.9</span>
</td>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(65, 68, 135, 1);font-size: 12px;">
-3.1
-</div>
+<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);">3.1</span>
</td>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 15px;">
-1.5
-</div>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">1.5</span>
</td>
<td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(68, 1, 84, 1);font-size: 10px;">
-0.1
-</div>
+<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);">0.1</span>
</td>
<td style="text-align:center;">
setosa