Log in

View Full Version : shift first td column on top and rest below it in mobile view


vineet
02-18-2017, 09:20 AM
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



<!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>


6141
molendijk
02-18-2017, 12:24 PM
Something like this:
<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.
vineet
02-18-2017, 12:58 PM
hi molendijk

on desktop it should be normal like 4 columns.

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

vineet
molendijk
02-18-2017, 01:21 PM
Sorry, there was a misunderstanding.
Try this
<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>
Beverleyh
02-18-2017, 01:26 PM
Also see my reply here https://css-tricks.com/forums/topic/shift-first-td-column-on-top-and-rest-below-it-in-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.
vineet
02-18-2017, 01:38 PM
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
molendijk
02-18-2017, 01:48 PM
I'm afraid I don't understand what you mean. There's no 'name' in my code. What do you need it for?
vineet
02-18-2017, 02:09 PM
hi molendijk

with name i meant "John Smith David"

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

vineet
Beverleyh
02-18-2017, 02:17 PM
Please be aware that you can only have one <caption> element per table.
vineet
02-18-2017, 02:23 PM
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
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-simple-responsive-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


<!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>


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/forumdisplay.php?30-General-Paid-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:
<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>