Modern Template - Table rendering

[VaclavElias]

The modern template renders table with these classes table table-bordered table-condensed.

Would it be possible to include table-striped for better readability?

An example old version vs new version.

[Fabian-Schmidt]

Here is the commit which removed the striped class from the table:
https://github.com/dotnet/docfx/pull/8524/files#diff-ccf0b9841b58a1224c4741f4f88d4cd0b23aaf0dbdbcbd449e800d1c5440f68d

My understanding of the modern template is that it is by design less customizable. I am also looking for an answer how to configure the modern template and still getting updates.

[VaclavElias]

After a year, I've come to the conclusion that it would be beneficial if we could make the table class customizable for modern designs. It would be great if we could simply set the desired CSS classes in docfx.json. This way, anyone could easily customize their Bootstrap tables with specific Bootstrap classes.

[VaclavElias]

@filzrev any opinion on this?

Also the default table-condensed we are adding doesn't exist in Bootstrap 5 anymore, it should be table-sm (reference)?.

[Fabian-Schmidt]

I resolved this issue by adding the necessary css to my custom css file to make all tables striped. It is copied from bootstrap.

.table-bordered>tbody>tr:nth-of-type(odd)>* {
  --bs-table-color-type: var(--bs-table-striped-color);
  --bs-table-bg-type: var(--bs-table-striped-bg)
}

.table-bordered-columns>:not(caption)>tr>:nth-child(2n) {
  --bs-table-color-type: var(--bs-table-striped-color);
  --bs-table-bg-type: var(--bs-table-striped-bg)
}