Card-like Rows Table Template
Give each row individual focus with this modern design that styles table rows as distinct "cards".
By visually separating each row into its own container with rounded corners and a subtle shadow, this pattern helps users focus on one item at a time.
About this Card-like Table Style
This template reimagines the traditional table structure. While it still uses a semantic table element, the styling is designed to de-emphasize the grid. The table uses border-spacing to create gaps between rows, and each row (or the cells within it) is given its own background, rounded corners, and shadow. This creates the illusion that the list is composed of individual cards sitting on a background, a pattern widely used in modern user interfaces for everything from project lists to e-commerce products.
Key Features:
- Individual Row Focus: The card style helps users to process one row of information at a time.
- Modern & App-like Feel: This design pattern is very common in contemporary web and mobile apps.
- Clean Separation: Gaps between rows create clear visual separation without relying on traditional borders.
- CSS
border-spacing: Uses this property to effectively create the gaps between rows.
Ideal Use Cases:
- Project or task lists in a management app.
- Displaying a list of articles or posts in an admin dashboard.
- Listing transactions or invoices.
- Anywhere each row represents a distinct, self-contained item.
Dependencies:
None. This template uses only pure HTML and CSS.
Code
Here's the full code for the card-like rows table: