Change the role of table-row of a div using media queries

Hi,

In my code I would want to eliminate the rows when the screen has a particular min-width. My question is: Does it is possible, using media queries, to eliminate or to change property to a div that has the role of table row, and make that div just like it don’t exists?

In fact if you see my code, if I comment the div that behaviours as rows I obtain the expected result, four cells, but I want that result only with a particular min-width of the screen. Or is it possible only using jquery?

Please, can you help me? Thanks! :slight_smile:

JsFiddle link:

my code:

<!DOCTYPE html>
<html lang='it'>
   <head>
     <title></title>
     <meta charset='utf-8'>
     <meta name='description' content=''>
     <meta name='keywords' content=''>
     <meta name='author' content=''>
     <meta name='robots' content='all'>
     <!-- <meta http-equiv='X-UA-Compatible' content='IE=edge'> -->
     <link href='/favicon.png' rel='shortcut icon' type='image/png'>
     <style>
     html, body {
        padding: 0;
        margin: 0;
        height: 100%;
     }

     .table {
        display: table;
        width: 100%;
        height: 100%;
     }

     .row {
        display: table-row;
     }

     .cell {
       display: table-cell;
       border: 1px solid red;
     }

     </style>
   </head>
   <body>
      <div class='table'>
         <div class='row'>
            <div class='cell'>
               <div></div>
            </div>
            <div class='cell'>
               <div></div>
            </div>
         </div>
         <div class='row'>
              <div class='cell'>
                 <div></div>
              </div>
              <div class='cell'>
                 <div></div>
              </div>
         </div>
       </div>
   </body>
</html>

It should be possible. You may need to add an extra class to the rows you want to hide.

<div class='row hide-small'>

Then create a query to hide it:-

@media screen and (max-width: 600px) {
    .hide-small { display: none }
}

I have tried also, but with that way hides all the cells, I want four cells in line.

I hope I have explained in a good way the problem, however, I don’t know if there are some other ways, but, using jQuery is there exists a way to remove a element without removing its children or its content?

I have tried in this way, but, my code seems buggy and with problems, can you help me to improve it?

So when the window is greater than 800px, the div with display: table-row become display: block, so through jquery I test if display property of that div is block, if yes, unwrap its children, else go to the initial state.

Can you take a look at this?

JsFiddle:

I have added in CSS:

@media all and (min-width: 800px) {
   .row {
      display: block;
   }
}

and as script:

$(function() {
         $(window).resize(
            function() {
                if ( ($('.row').css('display') == 'block') && ($('.cell').parent().hasClass('row')) ) {
                  $(".cell").unwrap(".row");
                } else if (!$(".cell").parent().hasClass('row')) {
                  $(".cell").slice(0,1).wrap("<div class='row'></div>");
                  $(".cell").slice(2,3).wrap("<div class='row'></div>");
                }
            }
         ).resize();
      });

If your application is no more complicated your sample code, then this should do the trick:

<!DOCTYPE html>
<html lang='it'>
<head>
    <meta charset='utf-8'>
    <meta name='description' content=''>
    <meta name='keywords' content=''>
    <meta name='author' content=''>
    <meta name='robots' content='all'>
    <!-- <meta http-equiv='X-UA-Compatible' content='IE=edge'> -->
    <link href='/favicon.png' rel='shortcut icon' type='image/png'>
    <title>Change behavior of div table-row</title>
<!--
https://www.sitepoint.com/community/t/change-the-role-of-table-row-of-a-div-using-media-queries/234896
franciska
Aug 26,2016 1:27 PM
-->
    <style>
html, body {
    padding:0;
    margin:0;
    height:100%;
}
.table {
    display:table;
    width:100%;
    height:100%;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
    border:1px solid red;
}
@media screen and (min-width:1200px) {
    .table {
        word-spacing:-5em;
    }
    .row {
        display:inline-table;
        vertical-align:top;
        width:50%;
        height:100%;
        word-spacing:0;
    }
}
    </style>
</head>
<body>

<div class='table'>
    <div class='row'>
        <div class='cell'>
            <div></div>
        </div>
        <div class='cell'>
            <div></div>
        </div>
    </div>
    <div class='row'>
        <div class='cell'>
           <div></div>
        </div>
        <div class='cell'>
           <div></div>
        </div>
    </div>
</div>

</body>
</html>
2 Likes

yes, thanks! Your way does what I want!

1 Like

Sorry, I forgot to add the required meta tag to the head section of your code. It is needed with media queries.

<meta name="viewport" content="width=device-width, initial-scale=1">

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.