Bootstrap class .borderless does not seem respected by Quarto

[vincentarelbundock]

Hi all,

I'm running Quarto 1.4.151 and following the instructions on using Bootstrap classes for tables here: https://quarto.org/docs/authoring/tables.html#using-bootstrap-classes

The instructions specifically highlight .borderless as a possible class. I expected the tables to have no lines or rules at all; just the text in the cells. However, Quarto does not seem to respect the borderless class, and the table looks the same as default.

Below I paste a screenshot and a reproducible example which shows that (1) .borderless doesn't work, but (2) other Bootstrap classes like .striped work.

Any ideas?

---
format: html
---

| fruit  | price  |
|--------|--------|
| apple  | 2.05   |
| pear   | 1.37   |
| orange | 3.09   |

: Default class


| fruit  | price  |
|--------|--------|
| apple  | 2.05   |
| pear   | 1.37   |
| orange | 3.09   |

: Borderless table does not work {.borderless}

| fruit  | price  |
|--------|--------|
| apple  | 2.05   |
| pear   | 1.37   |
| orange | 3.09   |

: Striped table works {.striped}

[mcanouil]

That is a very old pre-release. Could you upgrade to the current stable version 1.4.459?

If you want to apply your own table styling, you need to disable Quarto processing, see https://quarto.org/docs/authoring/tables.html#disabling-quarto-table-processing.

[vincentarelbundock]

Thanks! I really should have updated before posting. It seems to solve the problem, removing lines between rows. However, the lines above the table and below stay, even if I disable quarto processing.

Any clues there?

[mcanouil]

Disabling Quarto features to put Bootstrap back gives the expected behaviour.

---
format:
  html:
    minimal: true
include-in-header:
  text: |
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
---

```{=html}
<table class="table-borderless table" data-quarto-disable-processing="true">
<thead>
<tr class="header">
<th>fruit</th>
<th>price</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>apple</td>
<td>2.05</td>
</tr>
<tr class="even">
<td>pear</td>
<td>1.37</td>
</tr>
<tr class="odd">
<td>orange</td>
<td>3.09</td>
</tr>
</tbody>
</table>
```

[vincentarelbundock]

Oh, this is very interesting! Does this suggest that the data-quarto-disable-processing option is not doing its job properly?

[mcanouil]

Maybe.

The following also works:

---
format: html
include-in-header:
  text: |
    <style type="text/css">
    .table-borderless {
      border: none;
    }
    </style>
---

```{=html}
<table class="table-borderless table" data-quarto-disable-processing="true">
<thead>
<tr class="header">
<th>fruit</th>
<th>price</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>apple</td>
<td>2.05</td>
</tr>
<tr class="even">
<td>pear</td>
<td>1.37</td>
</tr>
<tr class="odd">
<td>orange</td>
<td>3.09</td>
</tr>
</tbody>
</table>
```

It appears, there is some CSS conflicts somewhere, but I can't figure it out right now.

Current Bootstrap in Quarto 1.4 is v5.3.1 (latest is v5.3.2), so it's something else.

cc @cscheid in case you know what this is.

[vincentarelbundock]

FYI, the problem appears to extend to other bootstrap classes, like table-warning and friends.

[mcanouil]

I am starting to think those classes aren't even part of the distribution.
For instance, the class you get seems to be from:

• quarto-cli/src/resources/formats/html/bootstrap/dist/scss/_tables.scss

  Lines 96 to 106 in 1d720e8

  	.table-borderless {
  	// stylelint-disable-next-line selector-max-universal
  	> :not(caption) > * > * {
  	border-bottom-width: 0;
  	}
  	> :not(:first-child) {
  	border-top-width: 0;
  	}
  	}