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

This topic is empty.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
February 18, 2017 at 2:57 am #251646
vincss
Participant
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>
    
    john smith david
    
    <td>age 30 years</td>
    <td>bombay</td>
    <td>active</td>
  </tr>
</table>

</body>
</html>
```
February 18, 2017 at 5:52 am #251650

Beverleyh
Participant

screenshot is attached for more understanding

What screenshot?

Some of your markup looks a bit off so you should run that through a validator to clean it up. Also, the attributes you’re currently using on the table element are deprecated in HTML5 and you should use CSS instead. More info here https://developer.mozilla.org/en/docs/Web/HTML/Element/table

how can i do it ??

In a mobile-sized media query, maybe try hiding the first td but display the info in a pseudo element (on table perhaps?). I’m not sure if you’ll be able to do it with accessible results though. Maybe a table isn’t the way to go at all. Might be worth a rethink, but in the meantime, have a look at these guides https://css-tricks.com/accessible-simple-responsive-tables/ and https://css-tricks.com/responsive-data-tables/

If you need more help, show us what you’ve tried (i.e. your own attempt at coding your mobile layout) in a CodePen demo and we can offer further suggestions.

February 18, 2017 at 6:20 am #251651

Beverleyh
Participant

Also posted here http://www.dynamicdrive.com/forums/showthread.php?80966-shift-first-td-column-on-top-and-rest-below-it-in-mobile-view

February 18, 2017 at 6:46 am #251653

vincss
Participant

Hi beverleyh

it was my first post here and i didnt found any button to insert image.

secondly <table> tag is still widely used in html5 websites and coding for displaying tabular data.

thanks for the reply

vineet

February 18, 2017 at 7:07 am #251654

Beverleyh
Participant

it was my first post here and i didnt found any button to insert image.

You can use a free online service such as postimg.org, or upload to your web host and link from there.

secondly <table > tag is still widely used in html5 websites and coding for displaying tabular data.

I never said it wasn’t. What I did say was;

the **attributes** you’re currently using on the `table` element are deprecated in HTML5 and you should use CSS instead.
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

The forum ‘CSS’ is closed to new topics and replies.