Responsive Marks Table

Three different responsive solutions for displaying tabular data on all devices

Solution 1: Horizontal Scroll

Simple solution with horizontal scrolling on small screens

Code	Subject	Internal	External	Total	Grade
1FY1-05	HUMAN VALUES	25	43	68	B+
1FY2-12	MATHEMATICS	28	52	80	A
1FY3-08	COMPUTER SCIENCE	30	48	78	A-
1FY4-15	PHYSICS	22	45	67	B

How it works:

On small screens, this table will have a horizontal scrollbar. The table maintains its full width, allowing users to scroll sideways to see all columns.

Solution 2: Responsive with Breakpoints

Uses CSS media queries to adjust table layout at different screen sizes

Code	Subject	Internal	External	Total	Grade
1FY1-05	HUMAN VALUES	25	43	68	B+
1FY2-12	MATHEMATICS	28	52	80	A
1FY3-08	COMPUTER SCIENCE	30	48	78	A-
1FY4-15	PHYSICS	22	45	67	B

How it works:

On medium screens (≤768px), this table becomes horizontally scrollable. On very small screens (≤480px), it also reduces padding and font size for better fit.

Solution 3: Card Layout for Mobile

Transforms table rows into card-like layouts on mobile devices

Code	Subject	Internal	External	Total	Grade
1FY1-05	HUMAN VALUES	25	43	68	B+
1FY2-12	MATHEMATICS	28	52	80	A
1FY3-08	COMPUTER SCIENCE	30	48	78	A-
1FY4-15	PHYSICS	22	45	67	B

How it works:

On mobile screens (≤768px), this table transforms into a card-based layout. Each row becomes a card with label-value pairs, making it highly readable on small screens.