CODEWITHSUNDEEP
htmlcss
Skynet
Skynet

Reputation: 578

HTML/CSS responsive table

I have built a simple order form with delivery, billing and bank-account holder's address. Right now the thing is formatted as a big HTML table:

+---------+---------+----------+----------+
|         | DelAddr | BillAddr | BankAddr |
| Name    |         |          |          |
| Street  |         |          |          |
| City    |         |          |          |
| Country |         |          |          |
| Tel     |         |          |          |
+---------+---------+----------+----------+

Naturally this is not responsive and looks incorrect on mobiles, as the Wordpress template I use is a responsive one.

How do I (without JS if possible), make the table responsive, so that when the viewport gets smaller it looks like

+---------+---------+
|         | DelAddr |
| Name    |         |
| Street  |         |
| City    |         |
| Country |         |
| Tel     |         |
+---------+---------+
|         | BillAddr|
| Name    |         |
| Street  |         |
| City    |         |
| Country |         |
| Tel     |         |
+---------+---------+
|         | BnkAddr |
| Name    |         |
| Street  |         |
| City    |         |
| Country |         |
| Tel     |         |
+---------+---------+

Is that even possible using CSS alone? The difficulty is displaying the description column on every "splitted" row.

Upvotes: 0

Views: 1313

Answers (2)

Simon Vermeir
Simon Vermeir

Reputation: 41

You could maybe use bootstrap it's completely free and great for responsive design... .And I think you don't need js for that. Still it's included it's a greatcss libary

Upvotes: 0

Joseph Silber
Joseph Silber

Reputation: 220136

Chris Coyer has a very nice article on this: Responsive Data Tables.

Here's a quote:

The biggest change is that we are going to force the table to not behave like a table by setting every table-related element to be block-level. Then by keeping the zebra striping we originally added, it's kind of like each table row becomes a table in itself, but only as wide as the screen. No more horizontal scrolling! Then for each "cell", we'll use CSS generated content (:before) to apply the label, so we know what each bit of data means.

Upvotes: 2

Related Questions