Skip to main content

Forums

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #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>
    #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.

    #251651
    Beverleyh
    Participant
    #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

    #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.

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.
icon-link icon-logo-star icon-search icon-star