Table
Use the table shortcode to make your Markdown table responsive.
New in v0.22.0
table-responsive- has been dropped to denote a responsive size. Instead, use {sm|md|lg|xl|xxl} to create responsive tables up to a particular breakpoint.class="table-striped".Use the table shortcode to make your markdown table responsive. Responsive tables scroll horizontally to improve the layout on smaller screens. The following example illustrates how this works.
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|---|---|
| 1. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
| 2. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
| 3. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
{{< table >}}
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|----|---------|---------|---------|---------|---------|---------|---------|---------|---------|
| 1. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
| 2. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
| 3. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
{{< /table >}}The shortcode supports the following arguments:
| Name | Type | Required | Default | Comment |
|---|---|---|---|---|
| breakpoint | select | By default, the table shortcode is responsive for all viewports. When a breakpoint is set, the table will behave normally and not scroll horizontally from the provided breakpoint and up. Use none to disable this behavior. You can specify multiple breakpoints when using positional arguments. Supported values: [none, sm, md, lg, xl, xxl]. |
||
| class | string | Class attribute of the table element, e.g. table-striped-columns w-auto. |
See the tables documentation in the content section for additional styling options.