Responsive Table - jQuery resize bug

Question

I would like to ask you for your opinion and help.

For my little framework I would like inherently applied responsiveness on tables. That means no classes, ids, etc.

I am using :before with data-attribute for moving . Problem here is when I have smaller :before than content. So I made little jQuery javascript to make it same height as TD is.

function WindowResize(returnWidth) {
    var Width = 0;
    var Height = 0;
    // IE Handler

    if (!window.innerWidth) {
        if (!(document.documentElement.clientWidth == 0)) {
            // Strict Mode

            w = document.documentElement.clientWidth;

            h = document.documentElement.clientHeight;
        } else {
            // Quirks Mode

            w = document.body.clientWidth;

            h = document.body.clientHeight;
        }
    } else {
        //w3c

        w = window.innerWidth;

        h = window.innerHeight;
    }

    return (returnWidth) ? w : h;   
}

function setSameTDHeight(Width) {
    Width = parseInt(Width);

    //var TDList = document.getElementByTagName('TD'); 

    if (Width < 768) {

        $("td").each(
            function() {
                var TDHeight = $(this).innerHeight();
                $(this).before().css({'height': TDHeight});
            }           
        );
    }   
}

$(window).resize(
    function() {
        setSameTDHeight(WindowResize(true));
    }
);

$(document).ready(
    function() {
        setSameTDHeight(WindowResize(true));
    }
);

Here is jQuery am using.

And here is the bug am solving:

This is on 500px width of window. Content of previous TD is overflowing its TD border. I used clear attribute, float attribute etc. Nothing worked for me.

Here is codepen.io of whole situation: http://codepen.io/Ernedar/pen/dpYxwg

Can somebody help me solve this overflow?

Using absolute position, classes, IDs is not allowed for me to use, since I need this to make it universal.

EDIT: Image accuracy from tried solution from Dekel:

Dekel · Accepted Answer

Removed the height of the td (not needed).
Added a position: absolute and top: 0 to the table (since the flex caused some problems here and positioned the table in the middle [vertical] of the screen).
Added margin/padding (some with negative values) to the td and td:before to fix the positioning problems.

function WindowResize(returnWidth) {
  var Width = 0;
  var Height = 0;
  // IE Handler

  if (!window.innerWidth) {
    if (!(document.documentElement.clientWidth == 0)) {
      // Strict Mode

      w = document.documentElement.clientWidth;

      h = document.documentElement.clientHeight;
    } else {
      // Quirks Mode

      w = document.body.clientWidth;

      h = document.body.clientHeight;
    }
  } else {
    //w3c

    w = window.innerWidth;

    h = window.innerHeight;
  }

  return (returnWidth) ? w : h;	
}

function setSameTDHeight(Width) {
  Width = parseInt(Width);

  //var TDList = document.getElementByTagName('TD'); 

  $("td").each(
    function() {
      // we don't really need this:
      
      //var TDHeight = $(this).innerHeight();
      //$(this).before().css({'height': TDHeight});
    }			
  );
}

$(window).resize(
  function() {
    setSameTDHeight(WindowResize(true));
  }
);

$(document).ready(
  function() {
    setSameTDHeight(WindowResize(true));
  }
);

body {
  font-family: "Open Sans", sans-serif;
}

div {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

table {
  width: 100%;
  max-width: 100%;
}

tbody tr:nth-of-type(odd) {
  background-color: #EEEEEE;
}
tbody td {
  font-size: 12px;
}

thead th {
  font-weight: 700;
  font-size: 14px;
}

td, th {
  padding: 5px;
}

@media screen and (max-width: 768px) {
  table {
    position: absolute;
    top: 0;
  }

  table, thead, tbody, tr, td, th {
    display: block;
  }

  thead {
    width: 0;
    height: 0;
  }
  thead th {
    font-size: 0;
    color: transparent;
  }

  table tr {
    display: block;
  }
  table tr:after {
    content: "";
    display: table;
    clear: both;
  }
  table tr:before {
    display: block;
  }

  table td {
    width: 100%;
    box-sizing: border-box;
    clear: both;
    display: block;
    padding-left: 40%;
  }
  table td:before {
    content: attr(data-title);
    border: 1px solid green;
    width: 60%;
    float: left;
    min-height: 100%;
    margin-left: -65%;
  }
  table td:after {
    content: "";
    display: table;
    clear: both;
  }
}






  
    
      
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.
      
    
    
      
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.
      
      
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.
        Maximov
        25
        Pilot
        Employed
      
      
        Evelyn
        Headrow
        19
        Student
        Not Employed
      
      
        Bernard
        Milhouf
        37
        Teacher
        Employed
      
      
        Angelika
        deVille
        68
        Designer
        Retired

And a link to the fixed codepen:
http://codepen.io/anon/pen/BLmOym

Responsive Table - jQuery resize bug

Answers (1)

Related Questions