[vc_column_text width=”1/1″ el_position=”first last”]
Example tables
[/vc_column_text] [vc_column width=”1/1″ el_position=”first last”] [vc_column_text width=”1/3″ el_position=”first”]
1. Default table styles
Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the.table class is required.
[/vc_column_text] [tt_table table_name=”Default table” table_content=”
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
” width=”2/3″ el_position=”last”] [/vc_column] [vc_column width=”1/1″ el_position=”first last”] [vc_column_text width=”1/3″ el_position=”first”]
2. Striped table
Get a little fancy with your tables by adding zebra-striping—just add the .table-striped class.
Note: Striped tables use the :nth-child CSS selector and is not available in IE7-IE8.
[/vc_column_text] [tt_table table_name=”striped_table” table_content=”
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
” width=”2/3″ el_position=”last”] [/vc_column] [vc_column width=”1/1″ el_position=”first last”] [vc_column_text width=”1/3″ el_position=”first”]
3. Bordered table
Add borders around the entire table and rounded corners for aesthetic purposes.
[/vc_column_text] [tt_table table_name=”bordered_table” table_content=”
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
” width=”2/3″ el_position=”last”] [/vc_column] [vc_column width=”1/1″ el_position=”first last”] [vc_column_text width=”1/3″ el_position=”first”]
4. Condensed table
Make your tables more compact by adding the .table-condensed class to cut table cell padding in half (from 8px to 4px).
[/vc_column_text] [tt_table table_name=”condensed_table” table_content=”
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
” width=”2/3″ el_position=”last”] [/vc_column] [vc_column width=”1/1″ el_position=”first last”] [vc_column_text width=”1/3″ el_position=”first”]
5. Combine them all!
Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.
[/vc_column_text] [tt_table table_name=”combine_them_all” table_content=”
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
” width=”2/3″ el_position=”last”] [/vc_column]
