Page 1 of 2 12 LastLast
Results 1 to 10 of 14

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

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

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

    hi

    i have a data table

    on desktop it should show data in normal 4 columns

    but

    On mobile view width 320px

    i want to display first <td> column on top with 100% width showing just name "john smith david"

    and rest 3 <td>'s columns below it

    screenshot is attached for more understanding

    how can i do it ??

    thanks
    vineet

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    table td {
          border: 1px dotted #ccc;
        }
    	#name-head{
    		width:320px;
    		background-color:#ff0;
    		display:block;
    		height:20px;
    	}
    td:first-child{float:left;background-color:#ff0000;}
    </style>
    </head>
    
    <body>
    <table width="100%" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <div id="name-head">
        <td>john smith david</td>
        </div>
        <td>age 30 years</td>
        <td>bombay</td>
        <td>active</td>
      </tr>
    </table>
    
    </body>
    </html>
    Click image for larger version. 

Name:	john-table.jpg 
Views:	77 
Size:	6.4 KB 
ID:	6141

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,719
    Thanks
    46
    Thanked 213 Times in 206 Posts
    Blog Entries
    52

    Default

    Something like this:
    Code:
    <head>
    <style>
    table {border-right: 1px solid black}
    
    
    td {border:1px solid black; width: 320px; height: 300px; vertical-align: top; padding: 10px; border-right:0
    }
    
    caption {display: table-caption; text-align: left; border: 1px solid black; border-bottom:0; padding: 10px
    }
    </style>
    </head>
    <body>
    
    <table cellspacing="0" cellpadding="0" width="100%">
    <caption>John Smith David</caption>
    <tr>
    <td>Age 30 years</td>
    <td>Bombay</td>
    <td>Active</td>
    </tr>
    </table>
    
    </body>
    then add @media rules for mobile view.

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

    Default

    hi molendijk

    on desktop it should be normal like 4 columns.

    means it should on left side first <td> before "age"

    vineet

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,719
    Thanks
    46
    Thanked 213 Times in 206 Posts
    Blog Entries
    52

    Default

    Sorry, there was a misunderstanding.
    Try this
    Code:
    <head>
    <style>
    table {border-right: 1px solid black}
    
    td {border:1px solid black; width:320px; height: 300px; 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%">
    <caption>John Smith David</caption>
    <tr>
    <td id="pseudo_caption">John Smith David</td>
    <td>Age 30 years</td>
    <td>Bombay</td>
    <td>Active</td>
    </tr>
    </table>
    
    </body>

  5. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,029
    Thanks
    25
    Thanked 598 Times in 574 Posts
    Blog Entries
    40

    Default

    Also see my reply here https://css-tricks.com/forums/topic/...n-mobile-view/, particularly the comments about deprecated table attributes in HTML5 (use CSS instead) and comments about accessibility - using display:none; to hide table-cells will make them inaccessible to screen-readers and other assistive technology users.
    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

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

    Default

    hi molendijk

    yes, this works great now

    One thing i want to ask is

    there are multiple rows data and i will have to repeat "name" two times for every row

    is there any alternative that can use the "name" only once

    thanks
    vineet

  7. #7
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,719
    Thanks
    46
    Thanked 213 Times in 206 Posts
    Blog Entries
    52

    Default

    I'm afraid I don't understand what you mean. There's no 'name' in my code. What do you need it for?

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

    Default

    hi molendijk

    with name i meant "John Smith David"

    so i will have to repeat name everytime in the every row

    vineet

  9. #9
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,029
    Thanks
    25
    Thanked 598 Times in 574 Posts
    Blog Entries
    40

    Default

    Please be aware that you can only have one <caption> element per table.
    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

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

    Default

    Quote Originally Posted by Beverleyh View Post
    Please be aware that you can only have one <caption> element per table.
    hi Beverleyh

    then in the above code "caption" should be replaced with which element or tag so that it can be used multiple times in table

    vineet

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
  •