Responsive and unresponsive tables on same page?


I’m experimenting with responsive tables (breaking from multiple columns to 2 columns for smartphones etc).

I learned about it here:
But I’m wondering if there’s
a way to implement this responsive technique and *also a normal 2 column table in the same page?

I mean a responsive table below a normal fixed table in the same page. I have tried various things,

but both tables still display as responsive. Thanks.

Hi, well without a link we can’t really help you with this issue :). Could you provide us a link to the page so we can have a look at it?

the example targets all tables in the CSS. instead of doing that you target each table you want to change individually with an ID or class…

<table class=“responsive”>

.responsive thead,
.responsive tbody,
.responsive th,
.responsive td,
.responsive  tr {
	display: block;
.responsive  thead tr {
	position: absolute;
	top: -9999px;
	left: -9999px;
.responsive tr {
	border: 1px solid #ccc;
.responsive td {

etc, etc, etc… that way you’re only hitting one table, not both.

Wow, thanks for such a fast and helpful reply! It works with the .responsive code.

Just one other thing: I tried adding the line

 .responsive table {
   width : 220px;

But the width still looks like 100%; Any idea what I’m doing wrong? Thanks

ah, it’s ok I got the width right with:

.responsive : {width : 220px; } 

Thanks, your help is *really appreciated :o)

Tables don’t relaly respond to widths :). You need to add “table-layout:fixed;” to make it accept it :).

But your code selects a table inside .reponsive, which isn’t what DS had :).

Thanks for that!

You’re welcome :). Glad I was able to help.