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

**Beverleyh** · 02-18-2017, 03:00 PM

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/

**vineet** · 02-19-2017, 04:04 AM

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: 131
Size: 8.2 KB
ID: 6146

**Beverleyh** · 02-19-2017, 09:17 AM

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

**molendijk** · 02-19-2017, 02:20 PM

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>

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

Thread Tools

Search Thread

Similar Threads

Left column isn't same height as right column when data is added

use of jquery mobile in buildin a mobile site

Adding a column to 3-column fixed layout

Shift Control Value

Shift key press

Bookmarks

Bookmarks

Posting Permissions