Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BSv5] Set tables to display:block and explain why #1477

Merged
merged 3 commits into from
Mar 10, 2023
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 13 additions & 10 deletions userguide/content/en/docs/adding-content/lookandfeel.md
Original file line number Diff line number Diff line change
Expand Up @@ -241,25 +241,28 @@ of the following:

## Tables

By default, Docsy applies the following styles (through the class `.td-table`)
to all tables:
By default, Docsy applies the following styles to all tables, through the class `.td-table`:
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah yes, better! Thanks.


- [Bootstrap table][] styles:
- `.table`
- `.table-striped`
- `.table-responsive`
- `display: block`, which is necessary for tables to be responsive.

This particular styling configuration goes against the [Bootstrap recommendation
of _wrapping_ tables][wrap-tables] with `.table-responsive`, but it is more
convenient for content writers who get responsive tables using table Markdown
only, without the need for a wrapping `<div>`. The price to pay is that `display`
is set to `block`.
This styling configuration gives you responsive tables using Markdown only,
without the need to wrap the table in a `<div>`. It does, however, mean that all your tables have `display`
set to `block`. If you don't want this, you can create your own custom styles for tables.

To render a table without Docsy styles, apply the `.td-initial` class to the
{{% alert title="Note" %}}
Our default table styling goes against the [Bootstrap recommendation
to _wrap_ tables][wrap-tables] with `.table-responsive` - however, we think letting
users create responsive tables with just Markdown table syntax is more convenient.
{{% /alert %}}

To render a table without default Docsy styling, apply the `.td-initial` class to the
table. From the resulting `<table>` style base, it is easier to apply your own
custom styles (rather than trying to undo Docsy table styling), as is
illustrated next:
custom styles (rather than trying to undo default Docsy table styling), as is
illustrated in the following example:

```markdown
| Shape | Number of sides |
Expand Down