html-table-processing available in RevealJS
#10068
-
DescriptionHi, In the latest pre-release, users can set I believe that this option is not available in Thanks a lot! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 5 replies
-
|
Where did you see Note that a search in the documentation gives you: https://quarto.org/docs/authoring/tables.html#disabling-quarto-table-processing Also, I don't think this option is tied to any format, so it should work with the correct name. |
Beta Was this translation helpful? Give feedback.
-
|
Sorry for the typo. I did in fact use the correct syntax in my code. I just made a mistake when opening this issue. When I create tables and disable processing in Can you think of another reason why my table's CSS would be overriden in Below I paste two example Quarto files and screenshots of the outputs. Thanks! This is the style I want: 
This is not the style I want: 
|
Beta Was this translation helpful? Give feedback.
-
|
The thing is that Reveal.js does not have Bootstrap which is most of the styling tables have in You could look at the HTML code produced in each scenario. |
Beta Was this translation helpful? Give feedback.
-
|
Yes this is only CSS related. You are not specifically overriding some rules close enough to your table, or with less specificity so some Quarto / Revealjs CSS applies. For example Revealjs theme that we bundle defines some border around table rows If you are not overriding this in your own theme, meaning, you are not explicitly asking for no border at tall, then you are just inheriting the style of the output that will be used. By the way, it seems your package is output a Raw HTML a whole HTML document. I see some I see that some scripts is even loading mathjax, which could conflict with any other mathjax dependency loaded in the document. knitr and Quarto have ways for you to pass required dependencies so that they are added to the document Intermediate .md content```{=html}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tinytable_q85is73mbr5wwbpvlnyf</title>
<style>
.table td.tinytable_css_a9ilswqxx2guhx3h6vif, .table th.tinytable_css_a9ilswqxx2guhx3h6vif { border-bottom: solid 0.1em #d3d8dc; }
.table td.tinytable_css_qj0fuwz0ggycj0d6qkgi, .table th.tinytable_css_qj0fuwz0ggycj0d6qkgi { text-align: center; }
.table td.tinytable_css_lembosj9n3c17fxhgqki, .table th.tinytable_css_lembosj9n3c17fxhgqki { border-bottom: solid 0.05em #d3d8dc; }
</style>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
},
svg: {
fontCache: 'global'
}
};
</script>
</head>
<body>
<div class="container">
<table class="table table-borderless" id="tinytable_q85is73mbr5wwbpvlnyf" style="width: auto; margin-left: auto; margin-right: auto;" data-quarto-disable-processing='true'>
<thead>
<tr>
<th scope="col" align="center" colspan=2>Blah</th>
<th scope="col" align="center" colspan=1> </th>
<th scope="col" align="center" colspan=2>World</th>
</tr>
<tr>
<th scope="col">Sepal.Length</th>
<th scope="col">Sepal.Width</th>
<th scope="col">Petal.Length</th>
<th scope="col">Petal.Width</th>
<th scope="col">Species</th>
</tr>
</thead>
<tbody>
<tr>
<td>5.1</td>
<td>3.5</td>
<td>1.4</td>
<td>0.2</td>
<td>setosa</td>
</tr>
<tr>
<td>4.9</td>
<td>3.0</td>
<td>1.4</td>
<td>0.2</td>
<td>setosa</td>
</tr>
<tr>
<td>4.7</td>
<td>3.2</td>
<td>1.3</td>
<td>0.2</td>
<td>setosa</td>
</tr>
<tr>
<td>4.6</td>
<td>3.1</td>
<td>1.5</td>
<td>0.2</td>
<td>setosa</td>
</tr>
<tr>
<td>5.0</td>
<td>3.6</td>
<td>1.4</td>
<td>0.2</td>
<td>setosa</td>
</tr>
<tr>
<td>5.4</td>
<td>3.9</td>
<td>1.7</td>
<td>0.4</td>
<td>setosa</td>
</tr>
</tbody>
</table>
</div>
<script>
function styleCell_tinytable_izjr6ga2691dr1o2l49l(i, j, css_id) {
var table = document.getElementById("tinytable_q85is73mbr5wwbpvlnyf");
table.rows[i].cells[j].classList.add(css_id);
}
function insertSpanRow(i, colspan, content) {
var table = document.getElementById('tinytable_q85is73mbr5wwbpvlnyf');
var newRow = table.insertRow(i);
var newCell = newRow.insertCell(0);
newCell.setAttribute("colspan", colspan);
// newCell.innerText = content;
// this may be unsafe, but innerText does not interpret <br>
newCell.innerHTML = content;
}
function spanCell_tinytable_izjr6ga2691dr1o2l49l(i, j, rowspan, colspan) {
var table = document.getElementById("tinytable_q85is73mbr5wwbpvlnyf");
const targetRow = table.rows[i];
const targetCell = targetRow.cells[j];
for (let r = 0; r < rowspan; r++) {
// Only start deleting cells to the right for the first row (r == 0)
if (r === 0) {
// Delete cells to the right of the target cell in the first row
for (let c = colspan - 1; c > 0; c--) {
if (table.rows[i + r].cells[j + c]) {
table.rows[i + r].deleteCell(j + c);
}
}
}
// For rows below the first, delete starting from the target column
if (r > 0) {
for (let c = colspan - 1; c >= 0; c--) {
if (table.rows[i + r] && table.rows[i + r].cells[j]) {
table.rows[i + r].deleteCell(j);
}
}
}
}
// Set rowspan and colspan of the target cell
targetCell.rowSpan = rowspan;
targetCell.colSpan = colspan;
}
window.addEventListener('load', function () { styleCell_tinytable_izjr6ga2691dr1o2l49l(1, 0, 'tinytable_css_a9ilswqxx2guhx3h6vif') })
window.addEventListener('load', function () { styleCell_tinytable_izjr6ga2691dr1o2l49l(1, 1, 'tinytable_css_a9ilswqxx2guhx3h6vif') })
window.addEventListener('load', function () { styleCell_tinytable_izjr6ga2691dr1o2l49l(1, 2, 'tinytable_css_a9ilswqxx2guhx3h6vif') })
window.addEventListener('load', function () { styleCell_tinytable_izjr6ga2691dr1o2l49l(1, 3, 'tinytable_css_a9ilswqxx2guhx3h6vif') })
window.addEventListener('load', function () { styleCell_tinytable_izjr6ga2691dr1o2l49l(1, 4, 'tinytable_css_a9ilswqxx2guhx3h6vif') })
window.addEventListener('load', function () { styleCell_tinytable_izjr6ga2691dr1o2l49l(0, 0, 'tinytable_css_qj0fuwz0ggycj0d6qkgi') })
window.addEventListener('load', function () { styleCell_tinytable_izjr6ga2691dr1o2l49l(0, 1, 'tinytable_css_qj0fuwz0ggycj0d6qkgi') })
window.addEventListener('load', function () { styleCell_tinytable_izjr6ga2691dr1o2l49l(0, 2, 'tinytable_css_qj0fuwz0ggycj0d6qkgi') })
window.addEventListener('load', function () { styleCell_tinytable_izjr6ga2691dr1o2l49l(0, 3, 'tinytable_css_qj0fuwz0ggycj0d6qkgi') })
window.addEventListener('load', function () { styleCell_tinytable_izjr6ga2691dr1o2l49l(0, 4, 'tinytable_css_qj0fuwz0ggycj0d6qkgi') })
window.addEventListener('load', function () { styleCell_tinytable_izjr6ga2691dr1o2l49l(0, 0, 'tinytable_css_lembosj9n3c17fxhgqki') })
window.addEventListener('load', function () { styleCell_tinytable_izjr6ga2691dr1o2l49l(0, 2, 'tinytable_css_lembosj9n3c17fxhgqki') })
</script>
</body>
</html>
```Anyhow, this is CSS conflict with default Revealjs theme and what you expect for your table. You probably need to adjust the rules, or make some specific when your table is used for producing revealjs presentation. (you could include some CSS as dependency only when quarto render to revealjs format for example). Hope it helps |
Beta Was this translation helpful? Give feedback.
-
|
Thanks a lot for these details and for the advice. My main personal use case for the package was to output standalone tables, but a lot of users have been asking about Quarto. So I need to work to improve interoperability. Your point about embedding documents in documents is a good one. I'll improve this in the next release. Closing the issue because it was badly targeted and I now have a better sense of where the problem lies. Thanks both for your, time, help and insights! |
Beta Was this translation helpful? Give feedback.
-
|
Don't hesitate to open new discussion, especially if that help to make sure your package outputs work best in Quarto. |
Beta Was this translation helpful? Give feedback.
Yes this is only CSS related. You are not specifically overriding some rules close enough to your table, or with less specificity so some Quarto / Revealjs CSS applies.
For example Revealjs theme that we bundle defines some border around table rows
quarto-cli/src/resources/formats/revealjs/reveal/css/theme/template/theme.scss
Lines 217 to 222 in 7bb03a0
If you are not overriding this in your own theme, meaning, you are not explicitly asking for no border at tall, then you are just inheriting the style of the output that will be used.