Viho-Table Basic

New

Emay Walter

Human Resources Department

k
Follow
2 year
Experince
k
Follower

Viho-Table Basic

Basic Table with Border Bottom Color

Use a class.table to any table, and .border-bottom-* class for Border bottom color

Id	First Name	Last Name	Username	Designation	Company	Language	Country
1	Ram Jacob	Wolfe	RamJacob@twitter	Developer	Apple Inc.	Php	IND
2	John Deo	Gummer	JohnDeo@twitter	Designer	Hewlett packard	Html	US
3	Elana John	Cazale	ElanaJohn@twitter	Designer	Microsoft	Pug	UK
4	Meryl Streep	Roberts	MerylStreep@twitter	Developer	Tata Ltd.	React	IDN
5	Emma Stone	Stone	EmmaStone@twitter	Developer	Wipro Ltd.	Vue	IRN
6	Eliana Jons	Jons	ElianaJons@twitter	Developer	Info Ltd.	Vue	IRN

Inverse Table

Use a class table-inverse inside table element.

Id	First Name	Last Name	Office	Position	Salary	Join Date	Age
1	Stephan	Laiten	Tokyo	Accountant	$2100.00	21/01/2022	20
2	Fay	Van Damme	London	CEO	$1420.00	14/02/2022	22
3	Brevin	Oleveria	New York	Software Engineer	$1340.00	04/06/2022	18
4	Regina	Ottandy	France	Pre-sale Support	$3400.00	10/08/2022	25
5	Vani	Shah	Los Angeles	Senior Developer	$3500.00	23/07/2022	28

Hoverable rows with Horizontal Border

Hoverable row use a class table-hover and for Horizontal border use a class .table-border-horizontal , Solid border Use a class .border-solid .table class.

Id	Status	Signal Name	Security	Stage	Schedule	Team Lead
1	No Signal	Astrid: NE Shared managed	Medium	Triaged	0.33	Chase Nguyen
2	Offline	Cosmo: prod shared ares	Huge	Triaged	0.39	Brie Furman
3	Online	Phoenix: prod shared lyra-lists	Minor	No Triaged	3.12	Jeremy Lake
4	No Signal	Astrid: NE Shared managed	Negligible	triaged	13.18	Angelica Howards
5	Online	Astrid: NE Shared managed	Negligible	triaged	5.33	Diane Okuma

Inverse Table with Primary background

Use a class .bg-info, .bg-success, .bg-warning and .bg-danger classes. with light text on dark backgrounds inside table element.
To set the light background color use .bg-[color] class where [color] is the value of your selected color from stack color palette. So for teal color background class will be .bg-teal

Id	First Name	Last Name	Company	Credit Volume	Username	Role	Country
1	Ram Jacob	Wolfe	Apple Inc.	$3500.00	RamJacob@twitter	Developer	IND
2	John Deo	Gummer	Hewlett packard	$2400.00	JohnDeo@twitter	Designer	US
3	Elana John	Cazale	Microsoft	$2560.00	ElanaJohn@twitter	Designer	UK
4	Meryl Streep	Roberts	Tata Ltd.	$1870.00	MerylStreep@twitter	Developer	IDN
5	Emma Stone	Stone	Wipro Ltd.	$4580.00	EmmaStone@twitter	Developer	IRN
6	Eliana Jons	Jons	Info Ltd.	$4580.00	ElianaJons@twitter	Developer	IRN

Caption

A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

List of users
Id	Employee Name	Email	Experience	Sex	Contact No.	Age
1	Elana Robbert	ElanaRob@gmail.com	1 Year	Male	+91 9789887777	28
2	Stiphen Deo	Stiphen@yahoo.com	6 Month	Female	+91 9874563210	22
3	Genelia Ottre	Genelia@gmail.com	2 Days	Male	+91 8794562135	24

Table head options

Similar to tables , use the modifier classes.table-[color] to make theadappear in any color.

Id	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Striped Row with Inverse Table

Use .table-striped to add zebra-striping to any table row within the . This styling doesn't work in IE8 and below as :nth-child CSS selector isn't supported.

Id	Dessert	Calories	Fat	Price
1	KitKat	518	26	20
2	Donut	452	25	80
3	Eclair	262	16	10

Breckpoint Specific

Use .table-responsive{-sm|-md|-lg|-xl} functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

Id	Name	Order Id	Price	Quantity	Total
1	Iphone X Grey	C12345	$12550	1	$12550
2	Titan Watch	A14725	$120	2	$250
3	Apple Airpods	B54213	$210	1	$210

Responsive Tables with Light Background

A .table-responsive , .table-light inside table element.

Id	Task	Email	Phone	Assign	Date	Price	Status	Progress
1	Web Development	Pixel@efo.com	+91 7874226671	Mark Jecno	12/07/2022	$2315.00	Pending	75%
2	Graphic Design	Strap@google.com	+91 8347855785	Elana John	23/08/2022	$4125.00	Pending	45%
3	WordPress	Pixelstrap@gmail.com	+91 635609347	John Deo	15/04/2022	$6123.00	Done	100%

Sizing Tables

Example of Extra large table, Add .table-xl class to the .table , Large table Add .table-lg , Default table Add .table-de , Small table Add .table-sm , Extra Small table Add .table-xs to create a table. "

Id	Employee Name	Date	Status	Hours	Performance
1	Mark Jecno	22/08/2022	On leave	0	29/30
2	Elana Robbert	21/08/2022	Present	10	30/30
3	John Deo	18/08/2022	On leave	8	28/30

Custom Table Color with Hover and Stripped

Use classtable-hover, table-striped table-*table-info,table-success,table-success,table-info,table-danger,table-primary,table-secondary,table-light,table-active inside table element.

Id	Film Title	Released	Studio	Budget	Domestic Gross
1	Frozen	2013	Disney	$150,000,000	$400,953,009
2	Minions	2015	Universal	$74,000,000	$336,045,770
3	Zootopia	2016	Disney	$150,000,000	$341,268,248
4	Finding Dory	2016	Disney Pixar	$175,000,000	$486,295,561
5	Toy Story 3	2010	Disney Pixar	$200,000,000	$415,004,880

Dashed Border

Dashed border use class .table-dashed, for Dotted border use class .table-dotted, for Double border use class .table-Double

Id	Classname	Type	Hours	Trainer	Spots
1	Crit Cardio	Gym	9:00 AM - 11:00 AM	Aaron Chapman	10
2	Zumba Dance	Dance	8:00 AM - 9:00 AM	Donna Wilson	12
3	Like a butterfly	Boxing	9:00 AM - 10:00 AM	Randy Porter	13
4	Pilates Reformer	Gym	7:00 AM - 8:30 AM	Aaron Chapman	15
5	Mind & Body	Yoga	8:00 AM - 9:00 AM	Adam Stewart	20

Check Layout

Sidebar Type

Color Picker

Preview Settings

Try It Real Time

Layout Type

- LTR
- RTL
- Box

Emay Walter

Bootstrap Basic Tables

Basic Table with Border Bottom Color

Inverse Table

Hoverable rows with Horizontal Border

Inverse Table with Primary background

Caption

Table head options

Striped Row with Inverse Table

Breckpoint Specific

Responsive Tables with Light Background

Sizing Tables

Custom Table Color with Hover and Stripped

Dashed Border

Preview Settings

Defaul layout

Compact layout

Modern layout

Layout Type

SIDEBAR TYPE

Unlimited Color

Mix Layout

Bookmark

Bootstrap Basic Tables

Basic Table with Border Bottom Color

Inverse Table

Hoverable rows with Horizontal Border

Inverse Table with Primary background

Caption

Table head options

Striped Row with Inverse Table

Breckpoint Specific

Responsive Tables with Light Background

Sizing Tables

Custom Table Color with Hover and Stripped

Dashed Border

Preview Settings

Defaul layout

Compact layout

Modern layout

Layout Type

SIDEBAR TYPE

Unlimited Color

Mix Layout