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

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: 202
Size: 6.4 KB
ID: 6141

**molendijk** · 02-18-2017, 12:24 PM

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.

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

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>

**Beverleyh** · 02-18-2017, 01:26 PM

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.

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