Page 2 of 2 FirstFirst 12
Results 11 to 14 of 14

Thread: shift first td column on top and rest below it in mobile view

  1. #11
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    I can only assume you mean further tr and td elements, although you'll be changing the semantic meaning of the data relationships if you duplicate content that way. Either way, if you show us your code for what you come up with, we can offer further suggestions. In the meantime it might still be a good idea to consider if a table is the right at all in this situation? Or you could try something with flexbox? Please refer to these articles on responsive tables for further help https://css-tricks.com/accessible-si...onsive-tables/ and https://css-tricks.com/responsive-data-tables/
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  2. #12
    Join Date
    Jun 2008
    Posts
    121
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Hi beverleyh

    yes i meant further tr td elements

    see screenshot attached also

    here is code
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    @media screen and (max-width:320px)
    {
    		
    }
    </style>
    </head>
    
    <body>
    <table width="100%" border="1" cellspacing="0" cellpadding="5">
      <tr>
        <td>john smith david</td>
        <td>age 30 years</td>
        <td>bombay</td>
        <td>active</td>
      </tr>
      <tr>
        <td>samson</td>
        <td>age 42 years</td>
        <td>italy</td>
        <td>active</td>
      </tr>
       <tr>
        <td>george</td>
        <td>age 35 years</td>
        <td>spain</td>
        <td>active</td>
      </tr>
    </table>
    </body>
    </html>
    Click image for larger version. 

Name:	people-table.jpg 
Views:	15 
Size:	8.2 KB 
ID:	6146

  3. #13
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Well, I'm not seeing your attempt to create your mobile layout using the suggestions already given to you. To recap - your options to try so far are;

    - show or hide content using the display property
    - incorporate the use of pseudo elements
    - flexbox to play with layout
    - use something other than tables

    You should also remove those deprecated table attributes that I've already mentioned, and use CSS instead.

    As it currently stands, it looks like you've posted in this and multiple other forums (CSS Tricks, webdeveloper.com) to ask other people to do your work for you for free, which unfortunately is unrealistic in volunteer-driven online help communities. You *may* receive the code you want for free, if the subject personally interests another develop for example, but it is unlikely. You can wait it out though if you wish? Personally, I'd give it a whirl at your side and see what you come up with. Potential helpers are more likely to respond if you show that you're actually trying out the suggestions you receive .

    We do however offer a paid help forum at DD, so if nobody offers to do the work on your behalf, and you can't really face doing it yourself, you could post your request there and negotiate a fee with developers who wish to take you up on your offer of paid work. http://www.dynamicdrive.com/forums/f...-Work-Requests

    Good luck with your project
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  4. #14
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,725
    Thanks
    46
    Thanked 214 Times in 207 Posts
    Blog Entries
    52

    Default

    I agree with Beverleyh that using divs together with specific CSS is much better than using tables for your project.
    That said, I think the only way to obtain what you want with the help of tables is to use multiple tables and a little bit of javascript to dynamiclly set the captions:
    Code:
    <head>
    <style>
    table {border-right: 1px solid black; }
    td {border:1px solid black; width:25%; height: 100px; vertical-align: top; padding: 10px; border-right:0; }
    caption {text-align: left; border: 1px solid black; border-bottom:0; padding: 10px; }
    @media screen and (min-width: 321px) {caption {display: none}}
    @media screen and (max-width: 321px) {.pseudo_caption {display: none}}
    </style>
    </head>
    
    <body>
    
    <table cellspacing="0" cellpadding="0" width="100%" id="first_table">
    <tr>
    <td class="pseudo_caption">John Smith David</td>
    <td >Age 30 years</td>
    <td>Bombay</td>
    <td>Active</td>
    </tr>
    </table>
    
    <table cellspacing="0" cellpadding="0" width="100%" id="second_table">
    <tr>
    <td class="pseudo_caption" >Samson</td>
    <td>Age 42 years</td>
    <td>Italy</td>
    <td>Active</td>
    </tr>
    </table>
    
    <table cellspacing="0" cellpadding="0" width="100%" id="third_table">
    <tr>
    <td class="pseudo_caption" >George</td>
    <td>Age 35 years</td>
    <td>Spain</td>
    <td>Active</td>
    </tr>
    </table>
    
    <script>
    function caption(id)
    {
    document.getElementById(id).createCaption().innerHTML=document.getElementById(id).rows[0].cells[0].innerHTML; 
    }
    caption('first_table');
    caption('second_table');
    caption('third_table');
    </script>
    
    </body>

Similar Threads

  1. Left column isn't same height as right column when data is added
    By bayridge in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 07-07-2016, 02:00 PM
  2. Replies: 0
    Last Post: 03-02-2014, 11:59 AM
  3. Adding a column to 3-column fixed layout
    By slobjones in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 10-21-2007, 03:51 AM
  4. Shift Control Value
    By cute in forum JavaScript
    Replies: 1
    Last Post: 05-12-2007, 06:33 AM
  5. Shift key press
    By NCA in forum JavaScript
    Replies: 1
    Last Post: 02-01-2006, 05:14 PM

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
  •