Tables

ID	Name	Email	Role
1	Anna Garcia	anna.garcia@example.com	Admin
2	Luis Perez	luis.perez@example.com	Editor
3	Maria Lopez	maria.lopez@example.com	User
4	George Sanchez	george.sanchez@example.com	User
5	Sofia Ruiz	sofia.ruiz@example.com	Guest

Variable name	Default value	Description
`--b-content-table`	`#fff`	Background color for the content table component.
`--border-table`	`rgba(0, 0, 0, .3)`	Border color for the table and its cells.
`--b-table`	`purple`	Background color for the table header.
`--s-scroll`	`.4rem`	Size of the scrollbar for the table.
`--b-scroll`	`rgba(0, 0, 0, .6)`	Background color of the scrollbar thumb.
`--b-scroll-active`	`rgba(0, 0, 0, .8)`	Background color of the scrollbar thumb when active.
`--p-table-responsive`	`.3rem 1rem`	Responsive cell padding for .table and .table-cards inside responsive media queries.
`--p-table-cards`	`.75rem 1rem`	Default cell padding for .table-cards on non-responsive layouts.
`--border-table-left`	`purple`	Accent color for the left border on card rows in .table-cards.
`--bs-card`	`var(--box-shadow)`	Box shadow used for card-style rows in .table-cards.
`--text-table`	`#000`	Text color for table cells in .table-cards.

CSS Class	Description
`content-table`	Base class for the content table component. Sets the background, border, border-radius, max-height, overflow, and scrollbar styles.
`content-table.responsive-480`	Responsive class for the content table component. Sets max-width for small screens. Removes the table header for smaller screens. To display the header, use the data-th attribute in the td elements.
`content-table.responsive-768`	Responsive class for the content table component. Sets max-width for small screens. Removes the table header for smaller screens. To display the header, use the data-th attribute in the td elements.
`content-table.responsive-1024`	Responsive class for the content table component. Sets max-width for small screens. Removes the table header for smaller screens. To display the header, use the data-th attribute in the td elements.
`content-table > .table`	Class for the table element within the content table component. Sets border-collapse, margin, min-width.
`content-table > .table > thead`	Class for the table header. Sets background, color, position, top.
`content-table > .table > thead > tr > th`	Class for table header cells. Sets border, padding, white-space.
`content-table > .table > tbody`	Class for the table body. Sets styling for table rows and cells, including borders and padding.
`content-table > .table > tbody > tr > td`	Class for table data cells. Sets border, padding, vertical-align, white-space, and border adjustments for first-child and last-child.
`content-table > .table > tbody > tr > td[data-th]`	Class for table data cells with a data-th attribute. Used for responsive design to indicate the header of the cell.
`content-table > .table-cards`	Card-style table variant. Uses border-spacing for gaps between rows, applies box-shadow to rows, and adds a colored left border accent.
`content-table > .table-cards > thead > tr`	Header row in card-style tables. Applies border-radius and box-shadow for card appearance.
`content-table > .table-cards > tbody > tr`	Body row in card-style tables. Applies border-radius and box-shadow for card appearance.
`content-table > .table-cards > thead > tr > th`	Header cells in card-style tables. Sets background, removes borders, applies padding and text alignment.
`content-table > .table-cards > tbody > tr > td`	Data cells in card-style tables. Sets background, removes borders, applies padding and text alignment.
`content-table > .table-cards > * > tr > *:first-child`	First cell in card rows. Adds left border accent and left border-radius for card corners.
`content-table > .table-cards > * > tr > *:last-child`	Last cell in card rows. Adds right border-radius for card corners.