Ernedar Ernedar - 1 month ago 14
CSS Question

Responsive Table - jQuery resize bug

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

<thead>
. 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:

overflow content bug

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: enter image description here

Answer
  1. Removed the height of the td (not needed).
  2. 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).
  3. 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;
  }
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i&subset=latin-ext" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<div>
  <table>
    <thead>
      <tr>
        <th>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.</th>
        <th>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.</th>
        <th>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.</th>
        <th>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.</th>
        <th>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.</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-title="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.</td>
        <td data-title="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.</td>
        <td data-title="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.</td>
        <td data-title="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.</td>
        <td data-title="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.</td>
      </tr>
      <tr>
        <td data-title="Jméno">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.</td>
        <td data-title="Příjmení">Maximov</td>
        <td data-title="Věková šarže">25</td>
        <td data-title="Zaměření">Pilot</td>
        <td data-title="Životní situace">Employed</td>
      </tr>
      <tr>
        <td data-title="Jméno">Evelyn</td>
        <td data-title="Příjmení">Headrow</td>
        <td data-title="Věková šarže">19</td>
        <td data-title="Zaměření">Student</td>
        <td data-title="Životní situace">Not Employed</td>
      </tr>
      <tr>
        <td data-title="Jméno">Bernard</td>
        <td data-title="Příjmení">Milhouf</td>
        <td data-title="Věková šarže">37</td>
        <td data-title="Zaměření">Teacher</td>
        <td data-title="Životní situace">Employed</td>
      </tr>
      <tr>
        <td data-title="Jméno">Angelika</td>
        <td data-title="Příjmení">deVille</td>
        <td data-title="Věková šarže">68</td>
        <td data-title="Zaměření">Designer</td>
        <td data-title="Životní situace">Retired</td>
      </tr>
    </tbody>
  </table>
</div>

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