Responsive and unresponsive tables on same page?

HTML & CSS
1

Hi,

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

I learned about it here: http://css-tricks.com/examples/ResponsiveTables/responsive.php
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.

2

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?

3

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,
.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.

4

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

5

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


.responsive : {width : 220px; }

Thanks, your help is *really appreciated :o)

6

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 :).

7

Thanks for that!

8

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