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