Table Default Style
 | Title | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim. | Learn more | |
| Title | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim. | Learn more | |
| Title | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim. | Learn more |
Vertical Alignment
| Title | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim. | Learn more | |
| Title | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim. | Learn more | |
| Title | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim. | Learn more |
Table Divider Style
| Title | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim. | Learn more | |
| Title | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim. | Learn more | |
| Title | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim. | Learn more |
Large style and Highlight the hovered row
| Title | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim. | Learn more | |
| Title | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim. | Learn more | |
| Title | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim. | Learn more |
Table Striped Style
Title | | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim. | Learn more | |
Title | | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim. | Learn more | |
Title | | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim. | Learn more |
Multiple Sorting Order
Title | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim. | Learn more | | |
Title | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim. | Learn more | | |
Title | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim. | Learn more | |
Responsive table - Overflow mode (Resize browser to see how it works)
| Time | Topics | Content | Link | |
|---|---|---|---|---|
Good Morning Yoga | This presentation will describe seven essential actions that could unleash the power of prevention and substantially reduce the prevalence of behavioral health problems and inequality in health and behavior outcomes in the U.S. population. | Register | ||
Complete Body Workout | Business leaders know that growing a company requires you to put yourself out there and stay ahead of trends. One good way to accomplish both is by attending industry events throughout the year. | Register | ||
Gym Boxing | The Regional Leadership Conference provides the opportunity to meet officers from different sized sections as well as learn about the many different types of activities they hold. | Register | ||
Functional Training | In a marketplace where customers are more aware, active, and value-driven, firms must rapidly conceive and develop new products and services that meet customers' changing demands. | Register |
Responsive table - Stack on small viewports (Resize browser to see how it works)
| Meta | Title | Content | Link | |
|---|---|---|---|---|
Good Morning Yoga | Lorem ipsum dolor sit amet. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. | Read more | ||
Complete Body Workout | Lorem ipsum dolor sit amet. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. | Read more | ||
Gym Boxing | Lorem ipsum dolor sit amet. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. | Read more | ||
Functional Training | Lorem ipsum dolor sit amet. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. | Read more |
Content Fields
Here is a list of common content fields for Table add-on.
| Setting | Description |
|---|---|
| Title | A text field used for title. |
| Meta | A text field used for meta text. |
| Content | A text field for the main text blocks. |
| Image | An image field with an image picker. |
| Button Text | A text field used for button of the table item |
| Link | Enter or pick a link, an image or a video file. |
| Link title | Enter an optional text for the title attribute of the link, which will appear on hover. |
| Link Target | Choose whether or not your link opens in a new window. |
| Button Style | Set the button style. |
| Button Size | Set the size for button. |
| Full width button | Enable Full width button. |
Table Settings
Table settings, The Table Settings contains all the specific settings for an add-on. Here is a short overview.
| Setting | Description |
|---|---|
| Style | Select the table style, default, divider or striped row style. |
| Highlight the hovered row | Add this option to display a hover state on table rows. |
| Remove left and right padding | Add this option to remove the left/right padding container. |
| Size | Define the padding between table rows. |
| Vertical Alignment | Vertically center table cells. |
| Responsive | Stack columns on small devices or enable overflow scroll for the container. |
| Title Width | Define the width of the title cell. |
| Meta Width | Define the width of the meta cell. |
| Content Width | Define the width of the content cell. |
Head Settings
Head Table settings, The Head Settings contains all the specific settings for an add-on. Here is a short overview.
| Setting | Description |
|---|---|
| Title | Enter a table header text for the title column |
| Meta title | Enter a table header text for the meta column |
| Content title | Enter a table header text for the content column |
| Image title | Enter a table header text for the link column |
| Link title | Enter a table header text for the link column. |
General Settings
General settings, which are the same across all add-ons, are grouped in a General section at the bottom. Here is a short overview.
| Setting | Description |
|---|---|
| Margin | Keep the existing vertical margin (e.g. from headings), force specific margin or remove all margin. Margins of an element can be removed from the top and bottom. |
| Remove top margin. | Use this option to remove the add-on's top margin |
| Remove bottom margin. | Use this option to remove the add-on's bottom margin |
| Animation | Overwrite the animation settings from the section. This won't have any effect unless animations are enabled for the add-on. |
| Alignment | This option specifies the alignment of an add-on according to the surrounding element |
| Text Breakpoint | Define the device width from which the alignment will apply. |
| Visibility | Define when the add-on should be hidden. |
| CSS Class | If you wish to style a particular content element differently, then use this field to add a class name and also refer to it in your css file. |