SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    spain
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Responsive and unresponsive tables on same page?

    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/Respo...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. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    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?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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">

    Code:
    .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. #4
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    spain
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, thanks for such a fast and helpful reply! It works with the .responsive code.

    Just one other thing: I tried adding the line
    Code:
     .responsive table {
       width : 220px;
     }
    But the width still looks like 100%; Any idea what I'm doing wrong? Thanks

  5. #5
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    spain
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah, it's ok I got the width right with:
    Code:
    .responsive : {width : 220px; }
    Thanks, your help is *really appreciated )

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    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 .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    spain
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that!

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    You're welcome . Glad I was able to help.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •