☰
Trongate CSS Docs

Table Variations

While Trongate CSS provides excellent default table styling, you may want to customize tables for specific use cases. This guide explores various ways to modify table appearance and behavior.

Compact Tables

You can create more compact tables by adjusting cell padding using custom CSS:

ID Name Status
1 John Doe Active
2 Jane Smith Pending

Custom Header Colors

You can modify table header colors using CSS variables or direct color values:

Package Price Features
Basic $19.99 Essential features
Pro $49.99 Advanced features

Remember that while customizing tables, it's important to maintain good contrast ratios for accessibility. Test your custom styles with different color combinations to ensure readability.

Highlighted Rows

You can highlight specific rows for emphasis using custom classes:

Plan Users Price
Basic 5 users $29/mo
Professional 25 users $99/mo
Enterprise Unlimited $299/mo

Responsive Tables

For better mobile display, wrap your table in a container with horizontal scroll:

Product Category Price Stock Rating Actions
Premium Laptop Electronics $1,299.99 45 4.5/5 Edit | Delete
Wireless Mouse Accessories $49.99 132 4.8/5 Edit | Delete

Custom Cell Alignment

You can align cell content using text alignment classes:

Product Quantity Price
Premium Widget 5 $99.99
Basic Widget 3 $49.99

Status-Based Row Colors

Inside of defining a brand new color/class for table rows, you can also access pre-existing CSS variables to create status-based row colors. This technique guarantees that your table row styling is kept in alignment with underlying CSS variables. For example:

Order ID Customer Status
001 John Doe Completed
002 Jane Smith Pending
003 Bob Wilson Cancelled

What is color-mix()?

The color-mix() function in CSS lets you blend two colours together to create new ones. It's a simple way to create effects like transparent overlays, gradients, and custom colour combinations dynamically.

How Does It Work?

The function combines two colours in a specified colour space. Here's the syntax:

Example Use Case

Here's how you can blend 10% of your primary colour with transparency:

Understanding sRBG

The 'srgb' value in the color-mix() function refers to the sRGB (Standard RGB) colour space, which is a commonly used colour space for web and digital design. sRGB defines how colours are represented and rendered on screens. It is the default colour space for most web content and displays.

Browser Support and Fallback

Modern browsers support color-mix(). To ensure compatibility with older browsers, provide a fallback:

Pro Tips

  • Adjust percentages to fine-tune blending effects.
  • Combine with CSS variables to maintain consistent theming.
  • Use it for hover effects, overlays, and accent colours in your designs.

Advanced Customization Tips

  • Use CSS variables for consistent color theming across tables
  • Consider using max-height with overflow-y: auto for scrollable table bodies
  • Add white-space: nowrap to prevent content wrapping in specific cells
  • Use width or min-width on columns to control their sizing
  • Consider using the container classes (e.g., container-sm) to control table width